时间日期日历控件(bootstrap-datetimepicker)
1、引入jar
<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="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
2、改写js
$(function() { $(".startdate").datetimepicker({ language: i18n_lang, weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 1, format:'yyyy-mm-dd' }).on('changeDate', function (ev) { $(".enddate").datetimepicker('setStartDate', this.value); }); $(".enddate").datetimepicker({ language: i18n_lang, weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 1, format:'yyyy-mm-dd' }).on('changeDate', function (ev) { $(".startdate").datetimepicker('setEndDate', this.value); }); $('.form_datetime').datetimepicker({ language: i18n_lang, todayHighlight: 1, startView: 2, forceParse: false, showMeridian: true, autoclose: true, todayBtn: true, pickerPosition: "bottom-left" }); $('.form_date').datetimepicker({ language: i18n_lang, todayHighlight: 1, startView: 2, minView: 2, forceParse: false, autoclose: true, todayBtn: true, pickerPosition: "bottom-left" }); $('.form_year').datetimepicker({ language: i18n_lang, startView: 4, minView: 4, format: "yyyy", todayHighlight:true, forceParse:false, autoclose:true, todayBtn: true, pickerPosition: "bottom-left" }); });