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

发布于
2016-07-09

图片描述

好像是在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的格式是怎么样的？

easyui

阅读 5.9k

2 个回答

✓ 已被采纳

看官方示例，你写的 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;
        }
    });
});

devwang_com

1849

发布于
2016-07-28

更新于
2016-07-28

传送门：http://www.my97.net/dp/demo/i...
我们easyui中使用的日期是，My97DatePicker
应该都差不多吧，
这里有两种方法：

第一种方法在jsp中添加属性：

<input id="前面日期ID" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'后面日期ID\')||\'2020-10-01\'}'})"/> 
<input id="后面日期ID" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'前面日期ID\')}',maxDate:'2020-10-01'})"/>

这种方法是使不能选择的日期变灰色

第二种方法在js中做比较：

var startTime = $("#mystartTime").val();
var endTime = $("#myendTime").val();
if (startTime == "" || endTime == "" || startTime == null || endTime == null）{
} else {
            var sDate = new Date(startTime);
            var eDate = new Date(endTime);
            var fen = ((eDate.getTime() - sDate.getTime()) / 1000) / 60;
            var distance = parseInt(fen / (24 * 60));
            if (distance < 0) { 
                /***/ //小于0，表示前面日期大于后面日期
            }
        }

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进