bootstrap日历插件的使用详解编程语言

bootstrap日历插件的使用

1、插件引用

    <!– bootstrap时间插件css –>

    <link rel=”stylesheet” href=”../bootstrap/css/bootstrap.min.css” />

    <link rel=”stylesheet” href=”../bootstrap/css/bootstrap-datetimepicker.min.css”>

    <!– bootstrap时间插件 –>

    <script type=”text/javascript” src=”../bootstrap/js/bootstrap-datetimepicker.js”></script>

    <script type=”text/javascript” src=”../bootstrap/js/bootstrap-datetimepicker.zh-CN.js”></script>

2、html代码

  <label>开始日期：</label><input id="startDate" class="form-control" size="16" type="text" placeholder="请输入开始日期" readonly class="form_datetime"> 
  <label>结束日期：</label><input id="endDate"  class="form-control" size="16" type="text" placeholder="请输入结束日期" readonly class="form_datetime"> 

3、js代码

    /** 
     * 初始化日期插件 
     */ 
    datePicker:function(){ 
        // 初始开始时间 
        $('#startDate').datetimepicker({ 
            language : 'zh-CN', 
            //startDate: new Date(),能被选择的开始时间 
            endDate: new Date(), 
            autoclose: true,     //选择完成后自动关闭 
            todayBtn: true,        //显示今天按钮 
            //weekStart: 1,        //周的开始时间默认0周日 
            minView :2,      //时间选择视图【0：小时，1：天，2：月，3：年,4：十年】 
            format : 'yyyy-mm-dd' 
        }); 
         
        // 初始化结束时间 
        $('#endDate').datetimepicker({ 
            language : 'zh-CN', 
            endDate: new Date(), 
            //startDate: new Date(),   
            autoclose: true, 
            todayBtn: true, 
            //weekStart: 1, 
            minView :2, 
            format : 'yyyy-mm-dd' 
        }); 
         
        $('#startDate').unbind("change"); 
        $('#startDate').change(function() { 
            $('#endDate').datetimepicker('setStartDate', $("#startDate").val()); 
        }); 
        $('#endDate').unbind("change"); 
        $('#endDate').change(function() { 
            $('#startDate').datetimepicker('setEndDate', $("#endDate").val()); 
        }); 
    },