-1

我想使用 jquery ui 日期选择器比较 3 个日期。

我有以下日期字段：

  • 查询日期
  • 从日期开始旅行
  • 迄今为止的旅行

以下规则适用：

  • Date of Enquiry必须是第一次约会
  • Travel from date必须在之后Date of Enquiry
  • Travel to date必须在之后Travel from date

我有以下脚本：

$(function() {
    $("#inputField").datepicker({
        //defaultDate: "-1w-4d",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#inputField1").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90"

    });

    $("#inputField2").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });
});
4

3 回答 3

1

您可以创建自定义日期比较函数并在日期选择器的onSelect事件中使用。这不是确切的答案，而是一种可能的解决方案，

....
onSelect: function( selectedDate , inst ) {
   var isValid =  validateTime( selectedDate, inst, this);
   if( isValid ) {
       $( "#inputField1" ).datepicker( "option", "minDate", selectedDate );
   }
   else {
       //show some appropriate error
   }
}
//where validateTime is custom function returning true or false

和自定义日期比较功能：

function validateTime( dateText, pickerInstance, picker) {
   //dateText         - selected date as text
   //pickerInstance   - a reference to the datepicker instance
   //picker           - the datepicker to be validated

   //get the date to check using getDate, like
   var field2DateVal = $("#inputField2").datepicker("getDate");
   //and compare it with other datepicker values
   //return true or false accordingly
}

我希望这种方式有效

于 2012-09-13T07:48:34.520 回答
0
  • 查询日期必须是最早的日期
  • 旅行开始日期必须在查询日期之后
  • Travel to date 必须在 Travel from date 之后

为了让您朝着正确的方向开始，我将开始研究所需的业务逻辑并在此基础上设计一个解决方案。

在从onSelect每个日期选择器中自动设置任何其他日期值之前，我可能会先将类似于下面的验证分开，然后从那里开始：

var $enquiryDate = $("#inputField"); // Must be before travel from and before travel to date
var $TravelFromDate = $("#inputField2"); // Must be after enquiry date but before travel to date
var $TravelToDate = $("#inputField2"); // Must be after travel from and after enquiry datedate

function isEnquiryDateValid(dateValue){
     // Must be before travel from and before travel to date

     // Compare date values and return true or false...
}

function isTravelFromDateValid(dateValue){
    // Must be after enquiry date but before travel to date

    // Compare date values and return true or false...
}

function isTravelToDateValid(dateValue){
    // Must be after travel from and after enquiry datedate

    // Compare date values and return true or false...
}

如果您想将基于值的更改应用于类似于以下内容的更改，则可以更改此设置：

function processSelectedEnquiryDate(dateValue){
     // Must be before travel from and before travel to date

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....
}

function processSelectedTravelFromDate(dateValue){
    // Must be after enquiry date but before travel to date

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....
}

function processSelectedTravelToDate(dateValue){
    // Must be after travel from and after enquiry datedate

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....

    // or simply show a validation error below the control....
}

根据选定的值在每个控件上设置默认值比验证每个选定的值并在控件下方显示验证错误更复杂，即：The tavel to date cannot be less than the travel from date

于 2012-09-13T08:04:00.637 回答
0

你可以使用喜欢

<label for="enquiry">Enquiry</label>
<input type="text" id="enquiry" name="enquiry"/>
<label for="from">From</label>
<input type="text" id="from" name="from" disabled/>
<label for="to">to</label>
<input type="text" id="to" name="to" disabled/>

​JavaScript 代码：

$(function() {
    $("#enquiry").datepicker({
        defaultDate: "+0d",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
            $("#from").removeAttr("disabled");
        }
    });
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
            $("#to").removeAttr("disabled");
        }
    });
    $("#to").datepicker({
        defaultDate: "+2w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});​

工作演示

于 2012-09-13T08:01:09.020 回答