1.用法
<input id="dd" type="text" class="easyui-datebox" required="required">
$('#dd').datebox({
required:true
});
官方文档传送门:http://www.jeasyui.net/plugins/173.html
2.修改日期格式 YY-MM-dd
默认日期格式为: 6/22/2011 ,我们平常喜欢使用的格式是“2011-06-22”, 同时 Today, Close 都为英文,要是能改成中文就好了,
于是开始求助百度,找到解决方案有以下两种:
一种是重写了formatter属性,来改变日期框的显示方式
一种是导入/locale/easyui-lang-zh_CN.js文件
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
一行代码搞定~~
3.时间范围选择:起始时间不受限制,终止时间不能选择起始时间选中的时间靠前的时间
<input id="intro-start-time" class="easyui-datebox" sharedCalendar="#sc">
<span style="padding: 0 10px">-</span>
<input id="intro-end-time" class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
<span style="padding: 0 10px"></span>
<span class="icon-tip" style="padding-left: 15px"></span>
<div class="fast-choose-box" style="display: inline-block">
<span id="fast-choose-week" class="fast-choose">7天</span>
<span id="fast-choose-mouth" class="fast-choose">30天</span>
</div>
var $introStartTime = $('#intro-start-time');
var $introEndTime = $('#intro-end-time');
$introStartTime.datebox({
value: 'Today',
onSelect:function(beginDate) {
$introEndTime.datebox().datebox('calendar').calendar({
validator: function (endDate) {
return beginDate <= endDate;
}
});
}
});
$introEndTime.datebox();
4.点击按钮快捷选择当前日期起的后7天和后30天
$('#fast-choose-week').on('click',function () {
$introStartTime.datebox('setValue', 'Today');
$introEndTime.datebox('setValue', currentDate(new Date(),7));
});
$('#fast-choose-mouth').on('click',function () {
$introStartTime.datebox('setValue', 'Today');
$introEndTime.datebox('setValue', currentDate(new Date(),30));
});
function currentDate(date, n){
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate() + n;
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (day >= 0 && day <= 9) {
day = "0" + day;
}
var currentFormatDate = year + "-" + month + "-" + day;
return currentFormatDate;
}
实现效果如图: