WdatePicker-限制日期选择

场景:

1. 开始时间,和结束时间最大选择今天。

2. 开始时间和结束时间的最大时间间隔为30天。

jsp代码:

<!-- 时间段 -->
<form>
    <!-- 开始时间格式规则直接绑定在input上 -->
    开始时间:
    <input type="text" style="line-height: 12px;" id="start_time_id" readonly="readonly" class="Wdate"
    name="start_time_name" onClick="WdatePicker({readOnly:true,dateFmt:‘yyyy-MM-dd ‘,maxDate:‘#F{$dp.$D(\‘end_time_id\‘)||\‘%y-%M-%d\‘}‘,minDate:‘#F{$dp.$D(\‘end_time_id\‘,{d:-29})}‘})"
    onchange="setEndTimeDurationWhileStartTimeChange();"/>

    <!-- 结束时间格式规则在js中进行及时调整 -->
    结束时间:
    <input type="text" style="line-height: 12px;" id="end_time_id" class="Wdate" name="end_time_name" readonly="readonly"/>
</form>

js代码:

// 结束时间:初始默认最大日期为今天
$(function(){
    // 设置结束时间的最大可取值为today
    $(‘#end_time_id‘).unbind("click");
    $(‘#end_time_id‘).bind("click",function(){
        WdatePicker({
            readOnly:true,
            dateFmt:‘yyyy-MM-dd ‘,
            minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘,
            maxDate:‘#F{\‘%y-%M-%d\‘}‘
        });
    });
});

// 开始时间值改变时,改变结束时间值得范围
function setEndTimeDurationWhileStartTimeChange(){
    var start = $(‘#start_time_id‘).val(); // 格式:2017-05-01 

    // 如果选中了开始时间
    if(start != "" && start != null){
        // endMaxDate = 开始时间+29天
        start = start.replace(/-/g,"/");
        var endMaxDate = new Date(start);
        endMaxDate.setDate(endMaxDate.getDate()+29); 

        // today = 今天
        var today = new Date();
        today.setHours(0);
        today.setMinutes(0);
        today.setSeconds(0);
        today.setMilliseconds(0);

        // 如果endMaxDate>today
        if(endMaxDate.getTime()>today.getTime()){
            // 设置结束时间的最大可取值为today
            $(‘#end_time_id‘).unbind("click");
            $(‘#end_time_id‘).bind("click",function(){
                WdatePicker({
                    readOnly:true,
                    dateFmt:‘yyyy-MM-dd ‘,
                    minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘,
                    maxDate:‘#F{\‘%y-%M-%d\‘}‘
                });
            });
        }else{
            // 设置结束时间的最大可取值为endMaxDate
            $(‘#end_time_id‘).unbind("click");
            $(‘#end_time_id‘).bind("click",function(){
                WdatePicker({
                    readOnly:true,
                    dateFmt:‘yyyy-MM-dd ‘,
                    minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘,
                    maxDate:‘#F{$dp.$D(\‘start_time_id\‘,{d:29})}‘
                });
            });
        }
    }
    // 如果清空了开始时间,重设结束时间的范围,到今天为止
    else{
        // 设置结束时间的最大可取值为today
        $(‘#end_time_id‘).unbind("click");
        $(‘#end_time_id‘).bind("click",function(){
            WdatePicker({
                readOnly:true,
                dateFmt:‘yyyy-MM-dd ‘,
                minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘,
                maxDate:‘#F{\‘%y-%M-%d\‘}‘
            });
        });
    }
}
时间: 2024-10-08 14:17:58

WdatePicker-限制日期选择的相关文章

日期选择

见附件:JSDatePicker 用法: 引用文件: <script src="../JSDatePicker/WdatePicker.js" type="text/javascript"></script> 页面使用: <asp:TextBox ID="txtFreeEndDate" runat="server" onclick="WdatePicker()"        

用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.android实现自绘日期选择控件 目的: 通过一个相对复杂的自定义自绘控件来分享: 1.ios以及android自定义自绘控件的开发流程 2.objc与c/c++混合编程 3.android ndk的环境配置,android studio ndk的编译模式,swig在android ndk开发中的作

Easyui datebox单击文本框显示日期选择

Easyui默认是点击文本框后面的图标显示日期,为了更进一步优化体验 修改为单击文本框显示日期选择框 修改jquery.easyui.min.js(作者用的是1.3.6版本,其他版本或有区别) 可 ctrl+f 搜索 "_outerWidth():0" 在本行下面添加如下代码: // datebox单击文本框出现日期选择 start if ($(_83f).hasClass("datebox-f")) { _844.click(function() { _845.c

mobiscroll日期选择插件移动端插件文本选择插件

移动端选择插件mobiscroll的使用demo 一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这文章有更好的写法还望赐教~ 首先是常用的日期使用: HTML部分: <li id="birthday"> <div class="mbase-menu-title">生日</div>

jquery做个日期选择适用于手机端

第一步:做个 文本框用于显示年月日的 第二步:点击文本框触发bootstrap模态框并显示 第三步:我是建一个外部js页面写的 js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 var date=new Date; var year=date.getFullYear();  var month=date.getMonth()+1; month =(month<10 ? "0"+month:month);  var mydate = (year.t

双日历日期选择控件

近期,需要在项目里使用日历,经过多方选择,最后决定使用 daterangepicker  (http://www.daterangepicker.com),代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker 但是,该控件是一个日期范围选择控件,使用singleDatePicker 可以变成单日期选择控件,但是只显示一个日期. 看了一下源代码,主要是在 daterangepicker.js 的有一段代码,注释掉即可:如下

移动端iscroll实现日期选择

哎,说多了都是泪: 引入相关JS文件 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> 样式 /*日期选择*/ .date{ position: fixed; top:

利用select实现年月日三级联动的日期选择效果

× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介绍 演示 规划 默认情况下,年.月.日分别由3个select控件组成,id分别为sel1,sel2,sel3.它们且所包含的option[0]的值,分别为'年'.'月'.'日' 年份范围为1900-2100,月份范围为1-12,天的范围为1-31 年份范围.月份范围是不变的.而天的范围根据实际日期的

react-native DatePicker日期选择组件的实现

本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走) 1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save 2. 然后运行: npm start 3.

Flex自定义组件开发之日周月日期选择日历控件

原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期.如果未选择日期,则该文本字段为空白,并且 DateChooser 控件中将显示当前日期的月份.当 DateChooser 控件处于打开状态时,用户可以在各个月份和年份之间滚动,并选择某个日期.选择日期后,DateChooser 控件关闭,