jquery.




    
datetimepicker.css
jquery.datetimepicker.main.js
1. 引入css和js (注：该控件要依赖于jquery)
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.main.js"></script>
<script src="jquery.datetimepicker.main.js"></script>
<input type="button" class="" id="datetimepicker"  value="请选择时间"  />
$('#datetimepicker').datetimepicker({
     lang: 'ch',//语言选择中文 注：旧版本 新版方法$.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'
     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隐藏
});
 *  监听时间插件显示时的事件
$('#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);
});
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
 继续你的创作。
                        原文链接：https://www.cnblogs.com/HKKILL/p/12209810.html
 安装bower全球与npm install -g bower 。
 运行npm install 。 npm将查看package.json并自动安装必要的依赖项。
 运行bower install ，它会安装bower.json定义的前端软件包。
 注意：如果使用Bower v1.5.2，则会收到错误消息： The "main" field
                                    转载：https://www.cnblogs.com/Lau7/p/5485216.html在这个基础上补充几点：1.设置只能选择5月4-5月9号的话 var actStartDate = "2018/05/04";
 var actEndDate = "2018/05/09";//注意时间的/线，用短横线就是不行，no why $('.date_time').datetimepicker({
默认时间间隔是1小时，但是需求是要求时间选择的间隔控制在5分钟。 
然后。百度一下，发现有很多结果。 比如 minStep , minIntervar 什么的。 看起来都像这么一回事。但是逐个测试发现都不行。...
                                    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
  使用jQuery ui首先需要引入jQuery类库，jQuery ui js脚本和jQuery
 ui css样式表。代码示例如下：
script
src="js/jquery-1.7.1.js">script>   
script
src="js/jquery-