datepicker是个很好用的时间选择插件,先看效果图:
代码实现很简单:
先定义两个输入框
<div class="controls">
<input type="text" id="fCtime" name="fCtime">
<span>至</span>
<input type="text" id="tCtime" name="tCtime">
</div>
然后写js代码
<script type="text/javascript">
$('#fCtime').datepicker({
format: 'yyyy-mm-dd',
language:"zh-CN",
autoclose:true,//选中自动关闭
todayHighlight: true,
keyboardNavigation: false,
forceParse: false
});
$('#tCtime').datepicker({
format: 'yyyy-mm-dd',
language: "zh-CN",
autoclose:true,
todayHighlight: true,
keyboardNavigation: false,
forceParse: false
});
</script>
附上datepicker的参数列表,这是看源码得到的,详细参数是用请参考:
$.fn.datepicker = datepickerPlugin;
var defaults = $.fn.datepicker.defaults = {
assumeNearbyYear: false,
autoclose: false,
beforeShowDay: $.noop,
beforeShowMonth: $.noop,
beforeShowYear: $.noop,
beforeShowDecade: $.noop,
beforeShowCentury: $.noop,
calendarWeeks: false,
clearBtn: false,
toggleActive: false,
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
datesDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
maxViewMode: 4,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0,
disableTouchKeyboard: false,
enableOnReadonly: true,
showOnFocus: true,
zIndexOffset: 10,
container: 'body',
immediateUpdates: false,
title: '',
templates: {
leftArrow: '«',
rightArrow: '»'
}