当前位置：文江博客话题详情

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

发布于 2022-09-03 08:57:53 字数 825 浏览 10 评论 0

图片描述

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

梦境 2022-09-10 08:57:53

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

人生百味 2022-09-10 08:57:53

传送门：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，表示前面日期大于后面日期
            }
        }

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文