时间日期日历控件(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"
	});
});

  

posted @ 2020-05-26 17:16  北方有鱼  阅读(627)  评论(0编辑  收藏  举报