基於bootstrap的datetimepicker插件

1、當時使用的資源地址：http://www.bootcss.com/p/bootstrap-datetimepicker/

2、如何讓時間只顯示到日期，不顯示具體時刻

控制顯示精度的是datetime.js的內容

$(function () {

    $('.form_datetime').datetimepicker({   //日期選擇框
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1
    });
}) 

可以在實際的js文件中重寫這部分。

minView的值表示精度。此例中，minView=2，精度為“日”。

3、如何讓顯示的日期為漢字

bootstrap-datetimepicker.fr.js/bootstrap-datepicker.zh-CN.js文件中定義了顯示的文字，

顯示中文，需要在設置的時候，把language設為“zh-CN”（datetime.js）

然后引用bootstrap-datepicker.zh-CN.js文件

;(function($){
    $.fn.datetimepicker.dates['zh-CN'] = {
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        today: "今日",

        suffix: [],
        meridiem: ["am", "pm"],
        weekStart: 1,

    };
}(jQuery));

4、html文件中的部分

<div class="form-group">
    <div class="row">
        <div class="col-xs-12">
            <label class="control-label">截止時間</label>
            <div class="input-group date form_datetime" data-date-format="yyyy-mm-dd" data-link-field="postDeadline">
                <input class="form-control" size="16" type="text" value="" readonly>
                <!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>-->
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
            <input type="hidden" id="postDeadline" name="deadLine" value="" /><br/>
        </div>
    </div>
</div>

5、對可選擇的時間進行限制，並設置顯示精度等（接2）

以下是有兩個datetimepicker，時間限制互相影響的情況。（與4中的html不一致）

// 初始化 datetimePicker
// elements 是需要 datetimePicker化元素
function initDateTimePicker($elements) {
    var today = formatDate();    

    $elements.datetimepicker({
        language:  "zh-CN",
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    // 默認都是從今天開始
    $elements.datetimepicker("setStartDate", today)
    
    var $start =  $elements.filter(".start");
    var $deadline = $elements.filter(".deadline");

    // 開始日期 默認為今天
    $start
        .find(".form-control")
            .val(today);

    // 當日期變化時，修改另一個時間的限制值(沒起作用)
    $start
        .on('changeDate', function(ev){
            $deadline.datetimepicker("setStartDate", formatDate(ev.date))
        });

    $deadline
        .on('changeDate', function(ev){
            $start.datetimepicker("setEndDate", formatDate(ev.date))
        });
}

function formatDate(date) {
    date = date || new Date();

    return [
        date.getFullYear(),
        date.getMonth() + 1,
        date.getDate()
    ].join("-");
}

若不考慮兩個datetimepicker的情況，只對其中一個設置，不能選擇今天之前的日期

            function initDateTimePicker($elements) {
                var today = formatDate();
                console.log(today);
                $elements.datetimepicker({
                    language:  "zh-CN",
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
                // 默認都是從今天開始
                $elements.datetimepicker("setStartDate", today)

                //var $start =  $elements.filter(".start");
                //var $deadline = $elements.filter(".deadline");

                // 開始日期 默認為今天
                $(this)
                    .find(".form-control")
                    .val(today);
            }

            function formatDate(date) {
                date = date || new Date();

                return [
                    date.getFullYear(),
                    date.getMonth() + 1,
                    date.getDate()
                ].join("-");
            }

使用

initDateTimePicker($(".form_datetime"));

6、修改顯示的樣式（此例中，讓日歷界面橫向占據整個界面）

/***********datetimepicker************/
.datetimepicker{
    width:calc(100% - 30px);
    left:15px!important;
}
.datetimepicker:before {
    display: none;
}
.datetimepicker::after {
    display: none;
}
.datetimepicker table{
    width:100%;
}