`

日期控件jeDate开始日期结束日期联动

阅读更多

官网:http://www.jemui.com/uidoc/jedate.html#linkage

html:

 

<#list pointsDeductRuleList as deductRule>
  <tr class="aui-grid-row deduct deduct2">
   <td style="width:0;"></td>
   <td class="aui-grid-cell" colspan="1">
      <div class="aui-grid-cell-div">
         <span style="padding-right: 20px;">活动日期:</span>
         <input class="pointsDeductStartDate" name="pointsDeductDate" type="text" autocomplete="off" readonly >
         <label style="float: none !important;">至</label>
         <input id="inpend" class="pointsDeductEndDate" name="pointsDeductDate" type="text" autocomplete="off" readonly >
         <span>金额满足:</span><input type="text" size="10" name="minAmount"  >&nbsp;元
         <span> 总金额:</span><input type="text" size="10" name="maxDiscount" >&nbsp;%
      </div>
    </td>
  </tr>
</#list>

 

js:

$(document).ready(function() {
            initDate();
        });

function initDate(){
  $('tr.deduct2').find('input.pointsDeductStartDate').each(function (ind,ele) {
                var eleEnd = $(ele).next().next();
                var start = {
                    format: 'YYYY-MM-DD',
                    maxDate: eleEnd.val(), //最大日期
                    choosefun: function(elem,datas){
                        console.info($(elem).val());
                        end.minDate = datas; //开始日选好后,重置结束日的最小日期
                    }
                };
                var end = {
                    format: 'YYYY-MM-DD',
                    minDate: $(ele).val(), //设定最小日期为当前日期
                    choosefun: function(elem,datas){
                        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
                    }
                };
                $(ele).jeDate(start);
                eleEnd.jeDate(end);
            });


        }

 

 

网上其它示例:

【自定义日期格式】
<span class="wstxt">开始日期:</span><input type="text" class="workinput wicon mr25" id="inpstart" readonly>
<span class="wstxt">结束日期:</span><input type="text" class="workinput wicon mr25" id="inpend" readonly>
<script>
var start = {
    format: 'YYYY-MM-DD hh:mm:ss',
    minDate: $.nowDate(0), //设定最小日期为当前日期
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    maxDate: '2099-06-30 23:59:59', //最大日期
    choosefun: function(elem,datas){
        end.minDate = datas; //开始日选好后,重置结束日的最小日期
    }
};
var end = {
    format: 'YYYY年MM月DD日 hh:mm:ss',
    minDate: $.nowDate(0), //设定最小日期为当前日期
    festival:true,
    maxDate: '2099-06-16 23:59:59', //最大日期
    choosefun: function(elem,datas){
        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
    }
};
$('#inpstart').jeDate(start);
$('#inpend').jeDate(end);

//或者是
$.jeDate('#inpstart',start);
$.jeDate('#inpend',end);
</script>

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    多功能jQuery日期控件 jeDate

    jeDate还支持更多高级功能,例如日期时间联动、日期范围选择、日期时间插件的独立使用等,开发者可以根据具体需求进行深入探索和应用。 ### 5. 总结 jeDate作为一款优秀的jQuery日期控件,凭借其丰富的功能、易用...

    多功能jQuery日期控件 jeDate.zip

    多功能jQuery日期控件 jeDate.zip 支持年月日,时分秒的选择。 请查看博客讲解:http://blog.csdn.net/TMaskBoy/article/details/51646994

    多功能jQuery日期控件 jeDate.js 支持年月日时分秒的选择

    MM)、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,操作等常规功能外,根据不同的日期格式,显示不同内容,还拥有更多趋近完美的解决方案。...

    多功能jQuery日期插件jeDate

    jeDate是一款大众化的日期控件,除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月(YYYY-MM)、日期范围限制、开始...

    jeDate日期控件带时分秒日期选择器代码

    总的来说,`jeDate`日期控件带时分秒日期选择器代码为前端开发者提供了一种高效、灵活的方式来处理日期和时间输入,它具有良好的可定制性和扩展性,是开发中一个值得推荐的工具。通过深入理解和应用`jeDate`,你可以...

    wps中excel日期控件下载

    在WPS Office的Excel应用中,日期控件是一种非常实用的功能,它允许用户在工作表中插入一个可交互的日历小部件,以便于选择和输入日期。标题“wps中excel日期控件下载”提示我们要关注如何在WPS Excel中获取和安装这...

    10几种PB日期控件

    9. **日期计算器(Date Calculator)**:允许用户通过加减操作计算日期,比如“从今天开始的30天后”或“前年的同一天”。 10. **自定义控件(Custom Control)**:开发者可以创建自己的日期控件,实现特定功能或界面...

    Excel VBA日期控件使用说明

    在Excel VBA(Visual Basic for Applications)中,日期控件是一种非常实用的工具,它允许用户在用户界面中选择特定的日期,增强了交互性和数据输入的准确性。本篇将详细介绍如何在Excel VBA中使用日期控件,并提供...

    qq日期控件 qq日期控件 qq日期控件 qq日期控件

    QQ日期控件是一款广泛应用于网页开发中的时间选择组件,它为用户提供了一种便捷的方式来选取日期,常见于在线表单、日程安排等场景。QQ日期控件通常与JavaScript库结合使用,提供美观的用户界面和良好的交互体验。...

    pb8版本的日期控件

    本篇文章将深入探讨PB8中的两种日期控件:独立日期控件和与数据窗口集成的日期控件。 1. 独立日期控件: 独立日期控件在PB8中称为DateEdit控件,它是一个单独的组件,可以在窗口或对话框中自由放置。DateEdit控件...

    android 日历控件 可选开始时间结束时间

    2. **日期选择逻辑**: 控件需要有机制来允许用户选择开始日期和结束日期,并确保结束日期不能早于开始日期。这通常需要通过监听日期改变的事件,然后在后台进行有效性检查。 3. **日期范围限制**: 在酒店预订的例子...

    jedate-6.5.0(日期控件)

    1. **联动选择**:多个日期控件之间可以实现联动,例如一个选择开始日期,另一个自动更新为结束日期。 2. **异步加载数据**:在特殊情况下,如节假日表,可以通过异步请求获取并填充到日期控件中。 3. **自定义工具...

    使用layui日期控件laydate对开始和结束时间进行联动控制的方法

    在本文中,我们将深入探讨如何使用layui框架中的日期控件laydate实现开始和结束时间的联动控制。这种功能常见于需要用户输入一个时间段的场景,例如预约、计划设定等,确保用户选择的结束时间在开始时间之后。 首先...

    可多选的日期控件

    在IT领域,尤其是在前端开发中,"可多选的日期控件"是一个常见的需求,它允许用户在日历界面中选择多个日期,而非只能选择单个日期。这种控件广泛应用于各种应用程序,如行程规划、会议安排或者数据分析等场景。在本...

    Axure9.0的高保真日期控件自定义格式

    Axure9.0的高保真日期控件自定义格式,控件基于中继器算法实现,主要实现包含日历自动切换,默认当前年月,当前或选择值选中状态,点击隐藏日历等功能。 Axure9.0的高保真日期控件自定义格式,控件基于中继器算法...

    js日期控件 支持IE、firefox、chrome

    在网页开发中,日期控件是一种常见的用户交互组件,它允许用户方便地选择日期,常用于表单填充或事件预订等场景。本压缩包提供的是一款跨浏览器的JS日期控件,兼容IE、Firefox和Chrome这三种主流浏览器,为开发者...

    可换皮肤的几种格式的日期控件

    许多日期控件支持联动选择,即选择一个开始时间后,会自动跳转到另一个输入框选择结束时间。例如,DateTimeRangePicker 是一个专门用于选择时间范围的组件,它可以方便地配置开始和结束时间的格式及联动行为。 四、...

    VB农历日期控件

    VB农历日期控件是Visual Basic(VB)编程环境中用于显示和处理中国农历日期的一种软件组件。在VB应用程序中,开发者可以利用这样的控件为用户提供农历日期的显示、选择和计算功能,尤其对于需要处理农历信息的系统,...

Global site tag (gtag.js) - Google Analytics