js插件---bootstrap-datepicker.js是什麼

js插件---bootstrap-datepicker.js是什麼

1、總結

一句話總結：選擇時間的插件

時間選擇插件

 

一、datepicker如何默認選擇當前天？

直接給datepicker對應的input設置value

能夠直接給datepicker對應的input設置value，

<input type="text" class="form-control" value="2018-04-02">

 

或者js代碼以下

 1 //獲取當前時間，格式YYYY-MM-DD
 2 function getNowFormatDate() {
 3     var date = new Date();
 4     var seperator1 = "-";
 5     var year = date.getFullYear();
 6     var month = date.getMonth() + 1;
 7     var strDate = date.getDate();
 8     if (month >= 1 && month <= 9) {
 9         month = "0" + month;
10     }
11     if (strDate >= 0 && strDate <= 9) {
12         strDate = "0" + strDate;
13     }
14     var currentdate = year + seperator1 + month + seperator1 + strDate;
15     return currentdate;
16 }
17 $('#datepicker').val(getNowFormatDate());

 

 

 

 

 

2、前端日期選取插件bootstrap-datepicker.js的使用

參考：前端日期選取插件bootstrap-datepicker.js的使用 - 默1451的博客 - CSDN博客
https://blog.csdn.net/qq_19688989/article/details/74839019

1、引入js和css文件

 

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

2、html

 

 

<input type='text' class='form-control selectData' id='date' name='date' value='2017-7-8'>

3、編寫js配置代碼

 

$.fn.datepicker.dates['cn'] = {   //切換爲中文顯示
	days: ["週日", "週一", "週二", "週三", "週四", "週五", "週六", "週日"],
			daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
			daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
			months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			today: "今天",
			clear: "清除"
	};
		
 $('.selectData').datepicker({
	autoclose: true, //自動關閉
	beforeShowDay: $.noop,    //在顯示日期以前調用的函數
	calendarWeeks: false,     //是否顯示今年是第幾周
	clearBtn: false,          //顯示清除按鈕
	daysOfWeekDisabled: [],   //星期幾不可選
	endDate: Infinity,        //日曆結束日期
	forceParse: true,         //是否強制轉換不符合格式的字符串
	format: 'yyyy-mm-dd',     //日期格式
	keyboardNavigation: true, //是否顯示箭頭導航
	language: 'cn',           //語言
	minViewMode: 0,
	orientation: "auto",      //方向
	rtl: false,
	startDate: -Infinity,     //日曆開始日期
	startView: 0,             //開始顯示
	todayBtn: false,          //今天按鈕
	todayHighlight: false,    //今天高亮
	weekStart: 0              //星期幾是開始
});

 

 

官方文檔地址：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

 

 

 

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

參考：bootstrap-datepicker 插件修改成默認中文 - cnhxz - 博客園
https://www.cnblogs.com/cnhxz/p/3888698.html

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
    };

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

至此完成默認中文的修改，效果以下圖：

 

 

 

4、本身經常使用的配置

<script>
    $(function () {
        //Date picker
        $('#datepicker').datepicker({
            todayBtn: "linked",          //今天按鈕
            autoclose: true, //自動關閉
            beforeShowDay: $.noop,    //在顯示日期以前調用的函數
            calendarWeeks: true,     //是否顯示今年是第幾周
            clearBtn: false,          //顯示清除按鈕
            daysOfWeekDisabled: [],   //星期幾不可選
            endDate: Infinity,        //日曆結束日期
            forceParse: true,         //是否強制轉換不符合格式的字符串
            format: 'yyyy-mm-dd',     //日期格式
            keyboardNavigation: true, //是否顯示箭頭導航
            language: 'cn',           //語言
            minViewMode: 0,
            orientation: "auto",      //方向
            startDate: -Infinity,     //日曆開始日期
            startView: 0,             //開始顯示
            todayHighlight: true,    //今天高亮
            weekStart: 0              //星期幾是開始
        });
    });
</script>