datetimepicker [/upload/post_files/oZnr6aUd2271iofN.txt](/upload/post_files/oZnr6aUd2271iofN.txt) 文件下载改为 .7z 后解压 代码插件版本自行对比 ~~~ //js中的datepicker属性设置 $('.selectData').datepicker({ bootcssVer: 3,//解决箭头不显示的版本问题 autoclose: true, //自动关闭 beforeShowDay: $.noop, //在显示日期之前调用的函数 calendarWeeks: false, //是否显示今年是第几周 clearBtn: false, //显示清除按钮 daysOfWeekDisabled: [], //星期几不可选 startDate: -Infinity, //日历开始日期 (参考下面demo) endDate: Infinity, //日历结束日期 forceParse: true, //是否强制转换不符合格式的字符串 showMeridian: false, — 是否显示上下午 daysOfWeekDisabled: [0,4,6], //一周的周几不能选 format: 'yyyy-mm-dd', //日期格式 keyboardNavigation: true, //是否显示箭头导航 language: 'cn', //语言 cn/eng minViewMode: 0, orientation: "auto", //方向 rtl: false, startView: 0, //开始显示 todayBtn: false, //今天按钮 todayHighlight: false, //今天高亮 weekStart: 0 //星期几是开始 pickerPosition:'top-right', //菜单显示的位置 ~~~ 这两天遇到datetimepicker中多次（包括第二次点击）点击input框时日期选择器不显示，经过查阅和多次测试，需要监听点击input时触发丢焦事件，同时不会关闭菜单。具体方法如下： ~~~ $('.selectData').datepicker({...}).on('click', function(e){ e.currentTarget.blur(); }); ~~~ ###取最近30天的参数定义 ~~~ var date1 = new Date(); var date2 = new Date(date1); //-30为30天前，+30可以获得30天后的日期 date2.setDate(date1.getDate() - 30); { startDate: date2, //日历结束日期 endDate: date1, //日历结束日期 } ~~~ 点击后执行事件：[注意两个on不能合并为on({'click': "func"(){}}, {'change': "func"()}] ~~~ $('.selectData').datepicker({}).on('click', function(e){ e.currentTarget.blur(); }).on('change', function () { console.log(111); }); ~~~ 点击后时间转时间戳 ~~~ $('.selectData').datepicker({}).on('change', function () { var datetime1 = $(this).val(); var datetimestamp = Date.parse(datetime1).toString(); var dts = datetimestamp.substr(0,datetimestamp.length-3); console.log(dts); }); ~~~ ####注意事项： ######如果有客户端夸时区的情况，前端提交时间的格式尽量不要选择时间戳，直接提交格林威治时间格式的字符串即可。由服务器再根据时区进行转时间戳查询。 其他版本演示： https://www.helloweba.net/demo/timepicker/ https://www.a5xiazai.com/demo/code_pop/18/1202/ https://xdsoft.net/jqplugins/datetimepicker/