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

最新推荐文章于 2025-09-05 09:58:31 发布

原创最新推荐文章于 2025-09-05 09:58:31 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#EasyUI #日历控件

EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用EasyUI的日历控件来限制用户选择的开始和结束日期，通过设置minDate和maxDate属性实现日期范围控制，当选择的日期超出范围时，超出部分将显示为灰色不可选。

首先引入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})">