EasyUI 日历控件之--限制日历开始和结束时间

喜欢ヅ旅行 2022-04-16 00:15 360阅读 0赞

## **首先引入EasyUI所需资源** ##

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

## demo代码（html局部代码） ##

事项时间:
    <input id="startTime" name="startTime" style="width:150px" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:endTime.value})">
     至
    <input id="endTime" name="endTime" style="width:150px" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:startTime.value})">

## **Wdate为日历框，onclick为点击日历框的时候判断 列表日期是否可以选择 ，dateFmt为日期格式化，minDate 和maxDate为日期限制，不满足为灰色** ##

效果如下图：  
(开始时间选择之后结束时间会有限制–灰色不能选中，反过来同理)  
![效果示意][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1YWludF9jc2Ru_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1YWludF9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20220416/a98d3df62dee43679556ed5521b0d5ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyUI 日期控件（easyui-datebox）：datebox开始时间限制结束时间

控件标签如下： <input id="aggStartTime" class="easyui-datebox" format="yyyy-MM-dd HH:mm:

我就是我/ 2023年07月15日 15:15/ 0 赞/ 22 阅读

相关 Qml控件之Calendar日历

> Calendar(日历)控件是基于Qml实现的，它兼容于`QtQuick 1.x`和`QtQuick 2.x`。可用于显示日期信息。 1. 演示 ![demo.gi

电玩女神/ 2023年01月01日 14:53/ 0 赞/ 469 阅读

相关 web页面控件之日历控件

web页面开发中一般需要引用日历，如根据一个日期或时间，或者根据一个日期范围或时间范围，查询业务数据。下面介绍一下使用日历控件的使用。功能概述

缺乏、安全感/ 2022年09月17日 14:24/ 0 赞/ 766 阅读

相关日历控件

<html> <body> <script src="Calendar.js" language="javascript" type="text/javascript

心已赠人/ 2022年08月27日 13:45/ 0 赞/ 293 阅读

相关 javaScript实现日历控件

最近学习js，闲来无事就写了个简单的日历控件，不知道别人是怎么实现的，纯粹自己想法写的，写的不好，但可以起到抛砖引玉的作用。先来看效果。 ![Center][

不念不忘少年蓝@/ 2022年08月01日 13:52/ 0 赞/ 301 阅读

相关 EasyUI 日历控件之--限制日历开始和结束时间

首先引入EasyUI所需资源 <link rel="stylesheet" type="text/css" href="../../themes/default/

喜欢ヅ旅行/ 2022年04月16日 00:15/ 0 赞/ 361 阅读

相关 js日历控件

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

水深无声/ 2022年03月09日 05:30/ 0 赞/ 320 阅读

相关 java日历控件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdn

逃离我推掉我的手/ 2022年02月14日 05:40/ 0 赞/ 332 阅读

相关日历控件WdatePicker

http://www.my97.net/dp/demo/resource/2.1.asp 详单用法网站 http://www.oschina.net/news/26789/t

╰+攻爆jí腚メ/ 2021年12月23日 12:57/ 0 赞/ 357 阅读

相关 js日历控件

[http://kimsoft-jscalendar.googlecode.com/svn/trunk/help.html][http_kimsoft-jscalendar.g

朱雀/ 2021年12月15日 14:39/ 0 赞/ 492 阅读