时间日期选择器(bootstrap-datepicker)

推荐一个bootstrap的时间日期选择插件bootstrap-datepicker。

引入插件

下载好插件后解压，把dist目录拷贝到你项目目录下。
接下来需要引入css和js。

<!--datepicker-->
<link rel="stylesheet" href="${ctx}/datepicker/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="${ctx}/datepicker/css/bootstrap-datepicker3.css">

<!--datepicker-->
<script src="${ctx}/datepicker/js/bootstrap-datepicker.js"></script>
<script src="${ctx}/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

我将dist目录下的东西放到了项目的datepicker目录下，所以按上面的路径引入。

基本使用

• html

<div class="input-group date" id="myDatepicker">
	<input type="text" class="form-control" value="">
	<div class="input-group-addon">
		<span class="glyphicon glyphicon-th"></span>
	</div>
</div>

• 初始化

<script type="text/javascript"> 
    var $date = $("#myDatepicker");
    $(document).ready(function () { 
        $date.datepicker({
            language: "zh-CN", //中文
            autoclose: true, //自动关闭
            clearBtn: true, //显示'清空'按钮
            todayBtn: true, //显示'今天'按钮
            todayHighlight: true, //当天高亮
            format: "yyyy.mm.dd" //日期格式
        });
        $date.datepicker('setDate', new Date());
        $date.datepicker('setStartDate', new Date());
        $date.datepicker('clearDates', new Date());
    });
</script>

调用方法

在datepicker上调用方法语法如下

$('.datepicker').datepicker('method', arg1, arg2);

• 获取日期

var date = $date.datepicker('getDate');

• 设置日期

$date.datepicker('setDate', new Date());

• 设置开始日期

$date.datepicker('setStartDate', new Date());

• 设置结束时间

$date.datepicker('setEndDate', new Date());

• 清空日期

$date.datepicker('clearDates');

---

更多配置和方法可以参见官方文档。