Question

我想使用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);
        }
    });
});

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

我希望这种方式有效

Answer 2

您可以使用

<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);
        }
    });
});

<强> Working Demo

Answer 3

查询日期必须是最早的日期

日期之旅必须在查询日期之后

迄今为止的旅行必须在旅行之后

为了让您从正确的方向着手，我将开始研究所需的业务逻辑，并根据该解决方案设计解决方案。

在自动设置每个日期选择器的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

Jquery UI datepicker - 比较3个日期

3 个答案:

JavaScript代码：