推荐一个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');
更多配置和方法可以参见官方文档。
