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

最新推荐文章于 2023-01-18 10:25:11 发布

weixin_33852020

最新推荐文章于 2023-01-18 10:25:11 发布

阅读量228

点赞数

原文链接：http://www.cnblogs.com/Renyi-Fan/p/10640287.html

版权

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());

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

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

一、引入js和css文件

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

二、html

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

三、编写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

三、bootstrap-datepicker 插件修改为默认中文

参考：bootstrap-datepicker 插件修改为默认中文 - cnhxz - 博客园
https://www.cnblogs.com/cnhxz/p/3888698.html

bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的，通过下面几个小修改让其支持默认中文

1、首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存

2、增加 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: "清除"
        }
    };

红色部分为增加的语言选项

3、修改默认参数，默认语言为 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
    };

红色部分为修改的默认语言

至此完成默认中文的修改，效果如下图：

四、自己常用的配置

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