1.官网地址

官网传送门

2.属性及使用示例

2.1调用

html:

<input  type="text"  readonly class="date" data-link-field="date" />

<input type="hidden" id="date" />

js:

$('.date').datetimepicker();

选中的日期会被存放在id为date的input里。

2.2 format(日期时间格式)

该属性控制日期的显示方式。属性具体说明如下

符号 意义
yyyy 年,全称。如2017
yy 年,简称。只显示后面2位。如17
MM 月,全称。月份显示为英文/中文。如April/四月
M 月,简称。如Apr/四
mm 月,全称。如03
m 月,简称。如3
HH 时,全称,12小时制。前面补0,如05
H 时,简称,12小时制。前面不补0,如5
hh 时,全称,24小时制。前面补0
h 时,全称,24小时制。前面不补0
ii 分,全称,前面补0
i 分,全称,前面不补0
ss 秒,全称,前面补0
s 秒,全称,前面不补0
P 大写的P,12小时制且大写'AM'或'PM'
p 小写的p,12小时制且小写'am'或'pm'

示例1:2017-03-30 上午 09:50

$('.form_dateTime').datetimepicker({
  format: 'yyyy-mm-dd p HH:ii', //年-月-日 上午/下午 时分
});

示例2:2017-03-30

$('.form_dateTime').datetimepicker({
  format: 'yyyy-mm-dd', //年-月-日
});

示例3:仅选择时间

$('.form_time').datetimepicker({
  format: 'hh:ii', //时分 hh:24小时制,HH:12小时制
});

hh:ii 选中的时间是24小时制    HH:ii 选中的时间是12小时制的(如果选中的是17:50,在页面上显示为05:50)

                       

也可以在input里面设置format:

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

format的格式可以根据表格说明DIY,哈哈。

2.3 weekStart 一周从那一天开始

类型:Integer

默认值:0(0-6表示星期日到星期六)

示例:从星期三开始

$('.form_dateTime').datetimepicker({
  weekStart: 3,
});

显示截图:

2.4 startDate 开始时间

类型:Date

startDate之前的日期都不能选择。

示例:只能选择当前时间之后的时间

$('.form_dateTime').datetimepicker({
  startDate:new Date()
});

显示结果: 如下图所示,今天之前的日期都是灰色,并且不可选择。

2.5 endDate 结束时间

类型:Date

endDate之后的时间都不可以选择。

2.6 daysOfWeekDisabled 一周禁用的日期

类型:String,Array

默认值:'',[]

0-6表示星期日-星期六。

示例:''格式,星期一、五不能选

 $('.form_date').datetimepicker({

  daysOfWeekDisabled:'1,5'
});

示例:[]格式,星期一、五不能选

$('.form_date').datetimepicker({
  daysOfWeekDisabled:[1,5]
});

显示结果:如下图所示,星期一、五的日期呈灰色,不能选中。

2.7 autoclose 是否自动关闭日期选择器

类型:Boolean

默认值:false,不自动关闭。

true:自动关闭

2.8 startView 日期时间选择器打开之后首先显示的视图。

类型:Number,String

默认值:'2','month'

具体属性说明如下:

意义
0 从小时视图开始,选时分
1 从天视图开始,选时
2 从月视图开始,选天
3 从年视图开始,选月
4 从十年视图开始,选年

示例:从小时视图开始

 $('.form_date').datetimepicker({

  startView: 0
});

显示结果:左右按钮变化的是时分。

2.9 minView 日期时间选择器所能提供的最精确的时间选择视图

类型:Number,String

默认值:0,'hour'

具体属性说明如下:

意义
0 从小时视图开始,选时分
1 从天视图开始,选时
2 从月视图开始,选天
3 从年视图开始,选月
4 从十年视图开始,选年

示例:从年视图开始

 $('.form_date').datetimepicker({

  minView: 3
});

选完月后,不再出现下级时间选择面板。

2.10 maxView 日期选择器最高能展示的范围视图

类型:Number, String

默认值:4, 'decade'

2.11 todayBtn 是否显示'today'按钮

类型:Boolean, "linked"

默认值: false

如果值为true或'linkd',则日期底部显示'today'按钮,用以选择当前日期。

如果是true的话,'today'按钮仅仅将视图转到当天的日期,如果是'linked',当天日期将被选中。

$('.form_date').datetimepicker({

  todayBtn: true
});

显示结果:

2.12 todayHighlight 当天日期高亮

类型:Boolean

默认值:false

false:不高亮;true:高亮

2.13 keyboardNavigation 方向键改变日期

类型:Boolean

默认值:false

false:方向键不能改变日期;true:方向键可以改变日期

2.14 language 语言

类型:String

默认值:en

en:英文;zh-CN:中文

需要中文显示日历时,可以引入中文包,也可以自己写一段汉化js覆盖。

汉化js代码如下:

$.fn.datetimepicker.dates['zh'] = {
  days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
  daysShort: ["日", "一", "二", "三", "四", "五", "六","日"],
  daysMin: ["日", "一", "二", "三", "四", "五", "六","日"],
  months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
  monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
  meridiem: ["上午", "下午"],
  //suffix: ["st", "nd", "rd", "th"],
  today: "今天"
};

2.15 forceParse 强制解析

类型:Boolean

默认值:true

在输入的值不是你规定的格式(format)时,会尽量解析成你规定格式

2.16 minuteStep 步进值

类型:Number

默认值:5

步进值用于构建小时视图。以分钟为单位。如下图所示,分钟5分钟为一个值。

2.17 pickerPosition 选择框的位置

类型:String

默认值:bottom-right

其他值:bottom-left,top-right,top-left

2.18 showMeridian 是否显示上午/下午

类型:Boolean

默认值:false

false:不显示;true:显示

在选择时分的界面,是否显示上午/下午

2.19 initialDate  初始化日期时间

类型:Date,String

默认值:new Date()

在打开时默认选择当时的时间,显示在时间日期选择器上。

3.使用

3.1绑定输入框,并设置format选项

使用js设置format属性:

html:

<input type="text" value="2012-05-15 21:05" class="date" data-link-field="date"  />

<input type="hidden" value="" id="date" />

js:

$('#datetimepicker').datetimepicker({

  format: 'yyyy-mm-dd hh:ii'

});

或在input里直接设置format属性:

html:

<input type="text" value="2012-05-15 21:05" class="date" data-link-field="date" data-date-format="yyyy-mm-dd hh:ii" />

<input type="hidden" value="" id="date" />

js:

$('#datetimepicker').datetimepicker();

选择的时间被存放在id为'date'的input中。

3.2作为组件使用:

html:

<div class="form-group">
  <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
  <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
  <input type="hidden" id="dtp_input1" value="" />
</div>

js:

$('.form_datetime').datetimepicker();

显示结果:

说明:

①.通过div的样式'.form_datetime'来初始化时间日期选择器。

②.第一个span样式是关闭按钮,第二个span样式是日历图标。

属性说明:

data-date:日期时间选择器面板上初始选中的值。与initialDate作用相同

data-date-format:设置日期时间格式。

data-link-field:映射值,该属性的只能是另一个标签的id。将选中的日期时间映射到data-link-field的值所在的标签。

如上例中,将选中的日期时间存放在<input type="hidden" id="dtp_input1" value="" />中。

3.3时间范围选择联动

开始日期不能大于结束日期,结束日期不能小于开始日期。

<div class="form-group">
  <label class="control-label">时间:</label>
    <div class="input-group date startDate" data-link-field="startDate">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
  <input type="hidden" id="startDate" value="" /><br/>
</div>
<div class="form-group">
  <div class="input-group date endDate" data-link-field="endDate">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
  <input type="hidden" id="endDate" value="" /><br/>
</div>

$('.startDate').datetimepicker({
  language:'zh',
  format: 'yyyy-mm-dd', //时间显示格式 年-月-日
  autoclose:true, //选择完时间后自动关闭,默认false(不关闭)
  startView: 2,
  minView: 2,
  todayBtn:true,
  todayHighlight: 1,
  pickerPosition:'bottom-left',
  forceParse: 0
}).on('changeDate',function(ev){
  var startTime = $('#startDate').val();

  $('.startDate).datetimepicker('hide');

  $('.endDate').datetimepicker('setStartDate',startTime);
})
$('.endDate').datetimepicker({
  language:'zh',
  format: 'yyyy-mm-dd', //时间显示格式 年-月-日 时:分
  autoclose:true, //选择完时间后自动关闭,默认false(不关闭)
  startView: 2,
  minView: 2,
  todayBtn:true,
  todayHighlight: 1,
  pickerPosition:'bottom-left',
  forceParse: 0
}).on('changeDate',function(ev){
  //var startTime = $('#startDate').val();
  var endTime = $('#endDate').val();
  $('.startDate').datetimepicker('setEndDate',endTime);
  $('.endDate').datetimepicker('hide');
})

datetimepicker.js 使用笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. mybatise插入返回主键ID

    之前遇到过一次解决了,结果这次又搞了半天,在这里记录一下吧. <insert id="insertUser" useGeneratedKeys="true" ...

  2. 论文笔记(3):STC: A Simple to Complex Framework for Weakly-supervised Semantic Segmentation

    论文题目是STC,即Simple to Complex的一个框架,使用弱标签(image label)来解决密集估计(语义分割)问题. 2014年末以来,半监督的语义分割层出不穷,究其原因还是因为pi ...

  3. 由html,body{height:100%}引发的对html和body的思考

    html,body{height:100%} 今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么html还需要设置height:100%呢,html不 ...

  4. NancyFX 第九章 Responses(响应对象)

    和内容协商最最为紧密的当属Nancy的Response对象. 在本书的第一张你应该就已经看到过Response对象,之前是使用它的AsFile 方法返回一个简单文件. using Nancy; nam ...

  5. SDP(12): MongoDB-Engine - Streaming

    在akka-alpakka工具包里也提供了对MongoDB的stream-connector,能针对MongoDB数据库进行streaming操作.这个MongoDB-connector里包含了Mon ...

  6. C# Redis实战(五)

    五.删除数据 在C# Redis实战(四)中讲述了如何在Redis中写入key-value型数据,本篇将讲述如何删除Redis中数据. 1.void Delete(T entity);删除函数的运用 ...

  7. 通过银行卡号识别归属银行,php方式

    这个例子不是很全,要做到齐全必须使用数据库字典来索引,而且数据量庞大,建议生产使用时限制几大行就行,直接不支持其他小行.此案例抛砖引玉 /** * 银行卡信息识别相关类 * 把bin号转化为长整形,再 ...

  8. MacOS中升级openssl

    MacOS中升级openssl   ➜  ~ brew instal openssl 使用情况中始终发现,openssl并没有真正升级   在/usr/local/Cellar/openssl/目录中 ...

  9. spring之事务

    1.编程式事务 2.声明式事务:aop

  10. Windows Live Writer介绍及相关问题解决

    今天本来想说更新一篇我的文章,更新的过程中添加了很多的内容,里面的图片太多了,导致我浏览器占用的内存不断增大,浏览器变得很卡,最后过了好久我终于更新完文章打算保存的时候居然卡住,然后所有我更新的文字和 ...