bootstrap之datetimepicker的使用

一、引入文件

        除了引入基本的jquery和bootstrap的js、bootstrap的css外,還須要引入bootstrap-datetimepicker.min.js,還有就是bootstrap-datetimepicker.zh-CN.js,由於要中文化。javascript

二、使用的例子

        List-1 htmlcss

<input type="text" class="form-control datetimepicker" id="startDate" style="display: inline;">

    對應的js以下List-2所示html

        List-2java

$("#startDate").datetimepicker({
    format: 'yyyy-mm-dd',//顯示格式
    todayHighlight: 1,//今天高亮
    minView: "month",//設置只顯示到月份
    startView: 2,
    forceParse: 0,
    language: 'zh-CN',
    showMeridian: 1,
    autoclose: 1//選擇後自動關閉
}).on('changeDate', function (e) {
    console.log(e.target.value);//獲得的就是選擇了的日期
});

    List-2中能夠設置參數,來控制datetimepicker的顯示,具體看官網: http://www.bootcss.com/p/bootstrap-datetimepicker/jquery

三、效果

                                                        

                                                                                  圖3.1bootstrap

相關文章
相關標籤/搜索