欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap-datepicker使用

程序员文章站 2022-05-25 21:17:16
...

下载地址:https://github.com/uxsolutions/bootstrap-datepicker

1、引入相关css/js

<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/locales/bootstrap-datepicker.zh-CN.js"></script>

2、输入框

<input type="text" id="input_date" class="datepicker form-control" />

3、js

$('.datepicker').datepicker({
	minView: "day", //  选择时间时,最小可以选择到那层;默认是‘hour’也可用0表示
	language: 'zh-CN', // 语言
	autoclose: true, //  true:选择时间后窗口自动关闭
	format: 'yyyy-mm-dd', // 文本框时间格式,设置为0,最后时间格式为2017-03-23 17:00:00
	//todayBtn: true, // 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
	defaultViewDate: true,
	/*todayBtn:'linked',
	todayHighlight: 1*/
});

4、date-range

html:

<div class="input-group input-daterange datepicker">
    <input type="text" class="form-control" value="">
    <div class="input-group-addon">到</div>
    <input type="text" class="form-control" value="">
</div>

js:

$(".datepicker").datepicker({
    language: "zh-CN",
    autoclose: true
});