在今年7月份时候 写了一篇关于 "JS日历控件" 的文章
, 当时仅仅支持 年月日 的日历控件,如今优化例如以下:
     1. 在原基础上 支持 yyyy-mm-dd 的年月日的控件。

     2. 在原基础上添加支持 yyyy-mm-dd HH:MM 年月日时分的控件。
     3. 在原基础上添加支持 yyyy-mm-dd HH:MM:SS 年月日时分秒的控件。

     4. 添加确定button 及 今天 和关闭button。

当我切换到其它年份的时候,我点击 "今天"button 就能够返回当前的年月份。

 
配置项例如以下:
 
  targetCls

  渲染日历的class 默觉得空
  beginyear   日历的開始年份 默觉得1949

  endyear   日历的结束年份 默觉得2049
  date   new Date() 默认日期 也能够在input框自己自己定义值
  type

日期格式。眼下支持三种格式:

     1. "yyyy-mm-dd" 年月日

     2. "yyyy-mm-dd HH:MM:SS" 年月日时分秒。

    3. "yyyy-mm-dd HH:MM" 年月日时分

  separator 日期的分隔符 默觉得 -
  wday  0, 设置周的第一天,默认从第一天開始

  language

对象:

{

      year: "年",

      month: "月",

      monthList:       ["1","2","3","4","5","6","7","8","9","10","11","12"],

      weekList: ["日","一","二","三","四","五","六"]}

比方例如以下demo年月日的示意图例如以下:

时分秒的demo例如以下:

时分的demo例如以下:

HTML代码例如以下:

1
2
3
4
5
6
<p>
  開始时间:
   <input name="mydate"
type="text" class="input_cxcalendar"  style="width:200px;">
  结束时间:
  <input name="mydate2"
type="text" class="input_cxcalendar" style="width:200px;" >
</p>

当然在头部要引入例如以下JS文件:

<script src="jquery-1.9.1.js"></script>

<script src="calendar.js"></script>

依赖于jquery框架。

后面的是日历控件JS

初始化方式例如以下:

1
2
3
4
5
6
7
8
9
10
<script>
$('.input_cxcalendar').each(function(){
   var a
new Calendar({
       targetCls:
$(
this),
       type: 'yyyy-mm-dd' 或者
‘yyyy-mm-dd HH:MM:SS’ 或者 ‘yyyy-mm-dd HH:MM’;
   },function(val){
       console.log(val);  //
回调函数 当前选中的值
   });
});
</script> 

代码分析:

1. 页面初始化时。调用init()方法,生成日历控件代码,例如以下所看到的:

2. 初始化完毕后,调用渲染日历面板的函数
_renderCalendarPanel(),例如以下所看到的:\

3. 在_renderCalendarPanel()函数做一些推断例如以下:

4.  在第三步定义了每月的天数 self.month_day; 定义了周末(周六,周日)的位置是第几个,例如以下所看到的:

接着代码例如以下:

例如以下设置wday = 2

_dayNumOfMonth函数的意思例如以下:

5. 以下我们接着来看看 通过春节 月份来渲染天数 _renderBody()函数,例如以下:

例如以下所看到的

接着:

等。

JS日历控件 灵活设置: 精确的时分秒.的更多相关文章

  1. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  2. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  3. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  4. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

  5. WdatePicker日历控件动态设置属性参数值

    首先吐槽一下需求人员给了我一个很坑的需求:WdatePicker日历控件里面选择的最小时间(minDate)的值是级联动态改变的,而且这个值要从数据库获取,这样子只能使用 ajax 来发起请求获取mi ...

  6. selenium - js日历控件处理

    # 13. js处理日历控件 ''' 在web自动化的工程中,日历控制大约分为两种: 1. 可以直接输入日期 2. 通过日历控件选择日期 基本思路: 利用js去掉readonly属性,然后直接输入时间 ...

  7. JS 日历控件

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html http://code.google.com/p/lhgcalendar/dow ...

  8. JS日历控件

    <input type="text" id="st" name="st" onclick="return Calendar( ...

  9. JS日历控件特效代码layDate

    https://www.js-css.cn/a/jscode/date/2015/0405/1461.html

随机推荐

  1. UVa-1586-分子量

    这是一道字符串的题目,我们直接对字符串进行解析,然后计算就可以了. 我是直接开了两个数组存入对应的值,没有进行判断,我们如果在if判断里面直接增加了i的值,最好先把对应的字符存起来,然后这样才不容易出 ...

  2. java反编译工具jad

    下好以后解压就可以用了,软件就只有一个exe文件和一个帮助文件.在众多的JAVA反编译工具中,有几种非常著名的工具使用了相同的核心引擎——JAD,其中主要包括:FrontEnd Plus.mDeJav ...

  3. Python面向对象之模块和包

    模块 模块的概念 模块是Python程序架构的一个核心概念 所有以.py结尾的源文件都是一个模块: 模块名也是标识符,需要遵循标识符的命名规则: 在模块中定义的全局变量,类,函数,都是直接给外界使用的 ...

  4. Android开发——查询/杀死手机里正在运行的进程

    0. 前言 以前有同学好像做过一个叫"自习君"的App,开启后自动检测用户这一天的自习时间,在学校里宣传广告还打了不少.其实实现原理非常简单,在SQlite数据库(也可以通过文件) ...

  5. luogu3415 祭坛

    先二分答案转化成判定问题. 考虑拿一根扫描线从 \(x=0\) 扫到 \(x=n\),每次移动扫描线更新每个位置它上面的点数和下面的点数,这样可以确定在当前的扫描线上哪些位置对于 \(y\) 轴方向是 ...

  6. 局部二值模式(Local Binary Patterns)纹理灰度与旋转不变性

    Multiresolution Gray Scale and Rotation Invariant Texture Classification with Local Binary Patterns, ...

  7. HDU 4418 高斯消元解决概率期望

    题目大意: 一个人在n长的路径上走到底再往回,走i步停下来的概率为Pi , 求从起点开始到自己所希望的终点所走步数的数学期望 因为每个位置都跟后m个位置的数学期望有关 E[i] = sigma((E[ ...

  8. CCF 201712-4 90分

    90分,不知道错在哪里了,dijkstra算法,用一个数组的d[i]表示以i点结尾的小路的长度,以i点为中心扩展时,若下一点为k,如果i->k是小路,则 d[j] = d[k]+M[k][j]; ...

  9. K/3Cloud二次开发基于WebDev附加进程调试

    大部分人在进行K/3cloud二次开发插件的调试时,选择的是附加IIS进程w3wp调试,本文给大家介绍一下基于WebDev附加进程调试,不用重启iis. 步骤如下: 1)拷贝K/3cloud产品安装目 ...

  10. [Usaco2006 Nov] Fence Repair 切割木板

    Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1356  Solved: 714[Submit][Status][Discuss] Description ...