基于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%;
}

优质内容筛选与推荐>>
1、vue2.0过滤器
2、Uboot 2014.07 makefile分析 - 其他Cortex系列
3、穿透Session 0 隔离（二）
4、PHP中的GetType和SetType
5、Object-C目录

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看