easyUI中datebox日期框的使用

最新推荐文章于 2023-10-12 11:27:02 发布

hst❀

最新推荐文章于 2023-10-12 11:27:02 发布

阅读量918

点赞数 2

分类专栏： easyui踩过的坑

本文链接：https://blog.csdn.net/HuangsTing/article/details/100522538

版权

easyui踩过的坑专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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;
}