前端之路：bootstrap 时间日期日历控件（datetimepicker）

一 bootstrap 时间日期日历控件datetimepicker

应用

手机
pc

涉及的样式

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

图片样式展示

pc

<div class="col-sm-4">
          		<div class="input-group">
          			<span class="input-group-addon">开始日期</span>
                    <a class='input-group date' id='datetimepicker3'>
		                <input type='text' class="form-control" id="startDate" readonly/>
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
            		</a>
            		<span class="input-group-addon">~</span>
            		<span class="input-group-addon">结束日期</span>
                    <a class='input-group date' id='datetimepicker4'>
		                <input type='text' class="form-control" id="endDate" readonly/>
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
            		</a>
            		
          		</div>
          	</div>

<div class="form-group col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon">活动结束日期</span>
                                    <a class='input-group date' id='datetimepicker2'>
                                        <input type='text' class="form-control" id="activityEnd" name="activityEnd"/>
                                        <span class="input-group-addon">
							                    <span class="glyphicon glyphicon-calendar"></span>
							                </span>
                                        <span class="input-group-addon" style="color:#F00">*</span>
                                    </a>
                                </div>
                            </div>

手机

<div class="form-group">
								<div class="input-group date form_date" id="datepicker" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:92%;">
									<input class="form-control" size="16" type="text" value="${initialDate}" name="PARAM9" readonly="readonly" id="PARAM9">
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
								<input type="hidden" id="dtp_input2" value="" />
							</div>

属性及使用示例

<input  type="text"  readonly class="date" data-link-field="date" />
<input type="hidden" id="date" />
$('.date').datetimepicker();

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

//设置日期时间控件
    $('#datetimepicker1').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd hh:ii:ss',//显示格式
        minView: 0,//设置只显示到月份
        initialDate: new Date(),
        autoclose: true,//选中自动关闭
        todayBtn: true,//显示今日按钮
        locale: moment.locale('zh-cn')
    });

可用属性列表

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：

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：

js:

$(’#datetimepicker’).datetimepicker({

format: ‘yyyy-mm-dd hh:ii’

});

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

html：

js:

$(’#datetimepicker’).datetimepicker();

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

3.2作为组件使用：

html：

　　 DateTime Picking 　　

　　　　 　　　　 　　　　 　　

　　

js：

$(’.form_datetime’).datetimepicker();

显示结果：

说明：

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

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

属性说明：

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

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

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

如上例中，将选中的日期时间存放在中。

3.3时间范围选择联动

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

　　 时间: 　　　　

　　　　 　　　　 　　　　 　　

　　

　　

　　　　 　　　　 　　　　 　　

　　

$(’.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 = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲endDate').val()…(’.startDate’).datetimepicker(‘setEndDate’,endTime);
　　$(’.endDate’).datetimepicker(‘hide’);
})

具体属性展示

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲datetimepicker'….datetimepicker.setLocale(‘ch’)
value: ‘2016-5-19’, // 设置当前datetimepicker的默认值（即input框中默认的日期时间）
rtl: false, // false 默认显示方式 true timepicker和datepicker位置变换 （自己验证没起作用）
format: ‘Y/m/d H:i’, // 设置时间年月日时分的格式 如: 2016/11/15 18:00
formatTime: ‘H:i’, // 设置时间时分的格式
formatDate: ‘Y/m/d’, // 设置时间年月日的格式
startDate: false, // new Date(), ‘1986/12/08’, ‘-1970/01/05’,’-1970/01/05’,
step: 10, // 设置时间时分的间隔
closeOnDateSelect: false, // true 设置datepicker可点击 false 设置datepicker不可点击 实际上可以双击
closeOnTimeSelect: true, // true 设置timepicker可点击 false 设置timepicker不可点击
closeOnWithoutClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker
closeOnInputClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker (会有闪动 先隐藏 再显示)
timepicker: true, // true 显示timepicker false 隐藏timepicker
datepicker: true, // true 显示datepicker false 隐藏datepicker
weeks: false, // true 显示周数 false 隐藏周数
defaultTime: false, // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. ‘10:00’ for formatTime: ‘H:i’)
defaultDate: false, // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or ‘1986/12/08’ or ‘-1970/01/05’ or ‘-1970/01/05’)
minDate: false, // 设置datepicker最小的限制日期 如：2016/08/15
maxDate: false, // 设置datepicker最大的限制日期 如：2016/11/15
minTime: false, // 设置timepicker最小的限制时间 如：08:00
maxTime: false, // 设置timepicker最大的限制时间 如：18:00
allowTimes: [], // 设置timepicker显示的时间 如：allowTimes:[‘09:00’,‘11:00’,‘12:00’,‘21:00’]
opened: false, // false默认打开datetimepicker可关闭 true打开datetimepicker后不可关闭
initTime: true, // 设置timepicker默认时间 如：08:00
inline: false, // ture设置datetimepicker一直显示
theme: ‘’, // ture设置datetimepicker显示样式 如: ‘dark’
withoutCopyright: true, // ture默认隐藏左下角’xdsoft.net’链接 false 显示左下角’xdsoft.net’链接
inverseButton: false, // false 默认 true datepicker的上一月和下一月功能互换 timepicker的上下可点击按钮功能互换
hours12: false, // true设置12小时格式 false设置24小时格式
next: ‘xdsoft_next’, // 设置datepicker上一月按钮的样式
prev : ‘xdsoft_prev’, // 设置datepicker下一月按钮的样式
dayOfWeekStart: 0, // 设置默认第-列为周几 如：0 周日 1 周一
parentID: ‘body’, // 设置父级选择器
timeHeightInTimePicker: 25, // 设置timepicker的行高
timepickerScrollbar: true, // ture设置timepicker显示滑动条 false设置timepicker不显示滑动条
todayButton: true, // ture显示今天按钮 false不显示今天按钮 位置在datepicker左上角
prevButton: true, // ture显示上一月按钮 false不显示上一月按钮 位置在datepicker左上角
nextButton: true, // ture显示下一月按钮 false不显示下一月按钮 位置在datepicker又上角
scrollMonth: true, // ture 设置datepicker的月份可以滑动 false设置datepicker的月份不可以滑动
lazyInit: false, // 翻译： 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
mask: false, // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具，从0到9的数字，设置为值的最高可能的数字。例如：第一个小时的数字不能大于2，而第一位数字不能大于5 如：{mask:‘9999/19/39 29:59’,format:‘Y/m/d H:i’}
validateOnBlur: true, // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
yearStart: 1950, // 设置最小的年份
yearEnd: 2050, // 设置最大的年份
monthStart: 0, // 设置最小的月份
monthEnd: 11, // 设置最大的月份
roundTime: ‘round’, // 设置timepicker的计算方式 round四舍五入 ceil向上取整 floor向下取整
allowDateRe : null, // 设置正则表达式检查日期 如：{format:‘Y-m-d’,allowDateRe:’\d{4}-(03-31|06-30|09-30|12-31)’ }
disabledDates : [], // 设置不可点击的日期 如：disabledDates: [‘21.11.2016’,‘22.11.2016’,‘23.11.2016’,‘24.11.2016’,‘25.11.2016’,‘26.11.2016’]
disabledWeekDays: [], // 设置不可点击的星期 如：disabledWeekDays:[0,3,4]
yearOffset: 0, // 设置偏移年份 如：2 代表当前年份加2 -2 代表当前年份减2
beforeShowDay: null, // 显示datetimepicker之前可调用的方法 {beforeShowDay:function(d) {console.log(“bsd”); } }
enterLikeTab: true, // tab按键均可使datetimepicker关闭 true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭
showApplyButton: false // 相当于确定按钮 true显示 false隐藏
});
4.
/*

• 监听时间插件显示时的事件
  */
  $(’#datetimepicker’).datetimepicker({
  onShow: function(dateText, inst) {
  console.log("—已打开datetimepicker----");
  }
  });

/*

• 监听时间插件关闭时的事件
  */
  $(’#datetimepicker’).datetimepicker({
  onClose: function(dateText, inst) {
  console.log("—已关闭datetimepicker----");
  }
  });

/*

• 监听点击日期时的事件
  */

$(’#datetimepicker’).datetimepicker({
onSelectDate: function(dateText, inst) {
console.log(dateText);
}
});

/*

• 监听点击时分的事件
  */

$(’#datetimepicker’).datetimepicker({
onSelectTime: function(dateText, inst) {
console.log(dateText);
}
});

/*

• 监听点击datepicker 上一月下一月按钮及选择月份点击事件
  /
  $(’#datetimepicker’).datetimepicker({
  onChangeMonth: function(dateText, inst) {
  console.log(dateText);
  }
  });
  /
• 监听获取当前datetimepicker显示的所有日期信息
  */
  $(’#datetimepicker’).datetimepicker({
  onGetWeekOfYear: function(dateText, inst) {
  console.log(dateText);
  }
  });

/*

• 监听选择年份的点击事件
  */
  $(’#datetimepicker’).datetimepicker({
  onChangeYear: function(dateText, inst) {
  console.log(dateText);
  }
  });

/*

• 实时监听你选择的日期和时间
  */
  $(’#datetimepicker’).datetimepicker({
  onChangeDateTime: function(dateText, inst) {
  console.log(dateText);
  }
  });

/*

• 实时监听datetimepicker上的所有事件
  */
  $(’#datetimepicker’).datetimepicker({
  onGenerate: function(dateText, inst) {
  console.log(dateText);
  }
  });