datetimepicker.js 使用笔记

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');
})