bootstrap datetimepicker时间日期控件

github地址：https://github.com/smalot/bootstrap-datetimepicker

 

Both Date and Time picker widget based on twitter bootstrap (supports Bootstrap v2 and v3) http://www.malot.fr/bootstrap-datetimepicker/

 

绑定输入框，并设置format选项：

1. <input type="text" value="2012-05-15 21:05" id="datetimepicker">

1. $('#datetimepicker').datetimepicker({
2. format: 'yyyy-mm-dd hh:ii'
3. });

绑定输入框，并设置format标记：

1. <input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

1. $('#datetimepicker').datetimepicker();

作为组件使用：

1. <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
2. <input size="16" type="text" value="12-02-2012" readonly>
3. <span class="add-on"><i class="icon-th"></i></span>
4. </div>

1. $('#datetimepicker').datetimepicker();

作为内联日期时间选择器：

1. <div id="datetimepicker"></div>

1. $('#datetimepicker').datetimepicker();

 

 

设置2个日期输入框结束时间不小于开始时间

 

$(".form_datetime").datetimepicker({

todayBtn: true,

language: 'zh-CN',
autoclose: true,
todayHighlight: true,
startView:2,

minView:2,
forceParse: true,

format:'yyyy-mm-dd'
})；

默认情况下，开始日期和结束日期之间是不存在关联的，需要我们进行设置。

//日期时间选择器
$("#datetimeStart").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click",

,function(ev){
    $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click" function (ev) {
    $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
});

click时间与changeDate事件是有区别的，刚开始没日期，选择日期后是不是触发changeDate时间的，click是会触发的，我们想要一开始就限定时间，所以要用click事件。

 

 

 

setStartDate

参数:

• startDate (String)

给日期时间选择器设置一个新的起始日期。

1. $('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

Omit startDate (or provide an otherwise falsey value) to unset the limit.

1. $('#datetimepicker').datetimepicker('setStartDate');
2. $('#datetimepicker').datetimepicker('setStartDate', null);

 

changeDate

当日期被改变时被触发。

1. $('#date-end')
2. .datetimepicker()
3. .on('changeDate', function(ev){
4. if (ev.date.valueOf() < date-start-display.valueOf()){
5. ....
6. }
7. });

设置开始时间不小于今天日期

 

function getToday()
    {
        var d=new Date();
        var str="";
        str+=d.getFullYear()+"-";
        
        var month=d.getMonth()+1;
        if(month<10)
            month="0"+month;
        var day=d.getDate();
        if(day<10)
            day="0"+day;
        
        str+=month;
        str+="-";
        str+=day;
        return str;
        
    }
    $("#start").on('changeDate', function(ev){
         var today=getToday();
        $("#start").datetimepicker('setStartDate',today);
        
    });

 

配置选项:

$("'#datetimepicker").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",//设置时间格式，默认值: 'mm/dd/yyyy'
        weekStart : 0, //一周从哪一天开始。0（星期日）到6（星期六）,默认值0
        startDate : "2013-02-14 10:00",//可以被选择的最早时间
        endDate : "2016-02-14 10:00",//可以被选择的最晚时间
        daysOfWeekDisabled : "0,6",//禁止选择一星期中的某些天，例子中这样是禁止选择周六和周日
        autoclose : true,//当选择一个日期之后是否立即关闭此日期时间选择器
        startView : 2,//点开插件后显示的界面。0、小时1、天2、月3、年4、十年，默认值2
        minView : 0,//插件可以精确到那个时间，比如1的话就只能选择到天，不能选择小时了
        maxView：4,//同理
        todayBtn : true,//是否在底部显示“今天”按钮
        todayHighlight : true,//是否高亮当前时间
        keyboardNavigation : true,//是否允许键盘选择时间
        language : 'zh-CN',//选择语言，前提是该语言已导入
        forceParse : true,//当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中
        minuteStep : 5,//分钟的间隔
        pickerPosition : "bottom-right",//显示的位置，还支持bottom-left
        viewSelect : 0,//默认和minView相同
        showMeridian : true,//是否加上网格
        initialDate : "2015-02-14 10:00"//初始化的时间
});

 

 

 

第二章 时间控件（DateTime Picker）