bootstrap-datepicker應用

參考本人的github：https://github.com/gmqllf/Datepicker-for-Bootstrap （fork官方的）

1、使用datepicker for bootstrap

頁面引入：

 

    <!-- datepicker樣式表 -->
    <link rel="stylesheet" href="../../plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">

<!--....正文 -->



<!-- datepicker -->
<script src="../../plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

注意這兩個文件的位置，好比在正常的bootstrap.css以後，在jquery以後放js等等

正文：

<div class="form-group col-sm-2">
                <!--<label class="control-label">時間:</label>-->
                <div class="input-daterange input-group bs-datepicker-range">
                    <input type="text" class="form-control" id="startDate" v-model="q.startDate" @keyup.enter="query" placeholder="註冊時間起始">
                    <span class="input-group-addon">-</span>
                    <input type="text" class="form-control" id="endDate" v-model="q.endDate" @keyup.enter="query" placeholder="註冊時間結束">
                </div>
            </div>

 

var options = {format: "yyyy-mm-dd", clearBtn: true, language: "zh-CN"};
$('#startDate').datepicker(options);
$('#endDate').datepicker(options);

便可..

頁面效果：

 

 注意：以上是改了bootstrap-datepicker.js，才顯示的中文：

中文顯示以下：

bootstrap-datepicker 插件修改成默認中文

 

bootstrap-datepicker 是一個很是優秀的時間選擇插件，默認是英文顯示日期的，經過下面幾個小修改讓其支持默認中文

一、首先將 bootstrap-datepicker.js 另存爲 utf-8 格式保存

二、增長 cn 語言選項

    var dates = $.fn.datepicker.dates = {
        en: {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            today: "Today",
            clear: "Clear"
        },
        cn: {
            days: ["週日", "週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
            daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: "今天",
            clear: "清除"
        }
    };

紅色部分爲增長的語言選項

三、修改默認參數，默認語言爲 cn

    var defaults = $.fn.datepicker.defaults = {
        autoclose: false,
        beforeShowDay: $.noop,
        calendarWeeks: false,
        clearBtn: false,
        daysOfWeekDisabled: [],
        endDate: Infinity,
        forceParse: true,
        format: 'mm/dd/yyyy',
        keyboardNavigation: true,
        language: 'cn',
        minViewMode: 0,
        orientation: "auto",
        rtl: false,
        startDate: -Infinity,
        startView: 0,
        todayBtn: false,
        todayHighlight: false,
        weekStart: 0
    };

紅色部分爲修改的默認語言。

 

2、datepicker在表單中的校驗validate：

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 form-group has-feedback">
                                    <label for="" class="col-sm-3 control-label no-padding-right">有效日期<span class="red">*</span>：</label>

                                    <div class="col-sm-9">
                                        <div class="input-group date">

                                            <input class="form-control" id="validateDate" name="validateDate"
                                                   readOnly="readOnly" type="text" placeholder="請輸入時間"
                                                   value="$!dateTool.format("yyyy-MM-dd", $!{buy.validateDate})"/>
                                            <span class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                        </div>
                                    </div>
                                </div>

初始化js：

$('#validateDate').datepicker({format: "yyyy-mm-dd", clearBtn: true, language: "zh-CN"}).on('hide', function (e) {
        $('#createSample').data('bootstrapValidator')
                .updateStatus('validateDate', 'NOT_VALIDATED', null)
                .validateField('validateDate');
    });

校驗代碼：

function initFormCheck() {
        $("#createSample").bootstrapValidator({
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: "請填寫求購產品標題"
                        },
                        stringLength: {
                            max: 20,
                            message: "長度不能超過20"
                        }
                    }
                }, validateDate: {
                    validators: {
                        notEmpty: {
                            message: "請填寫有效日期"
                        }
                    }
                }
            }
        });
    }

    // 初始化校驗
    initFormCheck();

這樣機UI能夠校驗了，而且出現錯誤以後，填寫日期以後，錯誤消失