easyui怎么控制后面的日期大于前面的日期?

查看:91
本文介绍了easyui怎么控制后面的日期大于前面的日期?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

好像是在data-options里写一个函数,搜了个代码

 function onSelect(d) {
        var issd = this.id == 'sd', sd = issd ? d : new Date($('#sd').datebox('getValue')), ed = issd ? new Date($('#ed').datebox('getValue')) : d;
            if (ed < sd) {
                alert('结束日期小于开始日期');
                //只要选择了日期,不管是开始或者结束都对比一下,如果结束小于开始,则清空结束日期的值并弹出日历选择框
                $('#ed').datebox('setValue', '').datebox('showPanel');
            }
        }
    </script>
开始日期:<input class="easyui-datebox" id="sd" data-options="onSelect:onSelect" />
结束日期:<input class="easyui-datebox" id="ed" data-options="onSelect:onSelect" />我想直接把函数写在data-options
里

data-options的格式是怎么样的?

解决方案

看官方示例,你写的 data-options="onSelect:onSelect" 是没有错的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DateBox Events - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DateBox Events</h2>
    <p>Click the calendar image on the right side.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <div style="margin-bottom:20px">
            <label class="label-top">Select Date:</label>
            <input class="easyui-datebox" data-options="onSelect:onSelect" style="width:100%;height:26px">
        </div>
        <div style="margin:10px 0">
            <span>Selected Date: </span>
            <span id="result"></span>
        </div>
    </div>
    <script>
        function onSelect(date){
            $('#result').text(date)
        }
    </script>
</body>
</html>

另外,官方提供了一个 Restrict Date 的例子,应该会有更好的体验。关键是这一段代码

$(function(){
    $('#dd').datebox().datebox('calendar').calendar({
        validator: function(date){
            var now = new Date();
            var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()+10);
            return d1<=date && date<=d2;
        }
    });
});

这篇关于easyui怎么控制后面的日期大于前面的日期?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆