bootstrap框架中的一个重要内容,时间选择框datepicker。
如,想要实现选择从某天到某天的两个输入框:
在HTML中写如下内容
<div class="input-daterange date-picker input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" id="start-date" value=""/>
<span class="input-group-addon">到</span>
<input type="text" class="input-sm form-control" name="end" id="end-date" value=""/>
</div>
input-daterange是指一个输入一个时间范围,也就说需要有两个输入框,默认后一个框的时间必须大于前一个框的 date-picker就规定了里面的input是时间选择的框框,后面还可以加data-date-format="yyyy-mm-dd"来规定时间格式
在JS中写如下内容
/*
* 没有如下内容,输入框是不会弹出时间选择的框框的
* autoclose是自动关闭框框的意思
* 可以加属性language: "zh-CN",来规定语言为中文
*/
$('#data_5 .input-daterange').datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true
});
$('#data_6 .input-daterange').datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true
});
还有在js中设置输入框中的时间
// 默认查询时间今天
var curDate = new Date();
var yearNow = curDate.getFullYear();
var monthNow = curDate.getMonth();
var dayNow = curDate.getDate();
var curDateFormat = getFormatDate(yearNow, monthNow, dayNow);
// 默认30天
var preDate = new Date(curDate.getTime() - 30 * 24 * 60 * 60 * 1000); // 前30天
var preDateFormat = getFormatDate(preDate.getFullYear(), preDate.getMonth(), preDate.getDate());
// 日期初始化
document.getElementById("start-date").value = preDateFormat;
document.getElementById("end-date").value = curDateFormat;
如果只是想实现一个时间输入框
如下:
<input type="text" class="datepicker" placeholder="请选择日期" />
<script type="text/javascript">
$(function () {
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: true,//清除按钮
todayBtn: true,//今日按钮
format: "yyyy-mm-dd"//日期格式
});
});
</script>