Проверьте, что конечная дата больше начальной с помощью jQuery

Question

Как проверить / проверить в jQuery, больше ли дата окончания [текстовое поле], чем дата начала [текстовое поле]?

Answer 1

Просто расширив ответ слияния. этот метод расширения работает с использованием плагина jQuery validate. Он будет проверять даты и цифры

jQuery.validator.addMethod("greaterThan", 
function(value, element, params) {

    if (!/Invalid|NaN/.test(new Date(value))) {
        return new Date(value) > new Date($(params).val());
    }

    return isNaN(value) && isNaN($(params).val()) 
        || (Number(value) > Number($(params).val())); 
},'Must be greater than {0}.');

Чтобы использовать это:

$("#EndDate").rules('add', { greaterThan: "#StartDate" });

или

$("form").validate({
    rules: {
        EndDate: { greaterThan: "#StartDate" }
    }
});

Answer 2

var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

if (startDate < endDate){
// Do something
}

Это должно сделать это, я думаю

Answer 3

Немного опоздал на вечеринку, но вот моя часть

Date.parse(fromDate) > Date.parse(toDate)

Вот деталь:

var from = $("#from").val();
var to = $("#to").val();

if(Date.parse(from) > Date.parse(to)){
   alert("Invalid Date Range");
}
else{
   alert("Valid date Range");
}

Answer 4

Ссылка на jquery.validate.js и jquery-1.2.6.js. Добавьте класс startDate в текстовое поле даты начала. Добавьте класс endDate в текстовое поле даты окончания.

Добавьте этот блок скрипта на свою страницу: -

<script type="text/javascript">
    $(document).ready(function() {
        $.validator.addMethod("endDate", function(value, element) {
            var startDate = $('.startDate').val();
            return Date.parse(startDate) <= Date.parse(value) || value == "";
        }, "* End date must be after start date");
        $('#formId').validate();
    });
</script>

Надеюсь, это поможет: -)

Answer 5

Я просто возился с ответом Дантеуно и обнаружил, что, несмотря на благие намерения, он, к сожалению, работает на нескольких браузерах, которые не IE. Это связано с тем, что IE будет довольно строг в отношении того, что он принимает в качестве аргумента для конструктора Date, а другие - нет. Например, Chrome 18 дает

> new Date("66")
  Sat Jan 01 1966 00:00:00 GMT+0200 (GTB Standard Time)

Это приводит к тому, что код выбирает путь «сравнения дат», и оттуда все идет вниз (например, new Date("11") больше new Date("66"), и это, очевидно, противоположно желаемому эффекту).

Поэтому после рассмотрения я изменил код, чтобы отдать приоритет пути «цифры» над путем «даты» и проверить, что входные данные действительно являются числовыми с отличным методом, представленным в Проверка десятичных чисел в JavaScript - IsNumeric ( ) .

В конце код становится:

$.validator.addMethod(
    "greaterThan",
    function(value, element, params) {
        var target = $(params).val();
        var isValueNumeric = !isNaN(parseFloat(value)) && isFinite(value);
        var isTargetNumeric = !isNaN(parseFloat(target)) && isFinite(target);
        if (isValueNumeric && isTargetNumeric) {
            return Number(value) > Number(target);
        }

        if (!/Invalid|NaN/.test(new Date(value))) {
            return new Date(value) > new Date(target);
        }

        return false;
    },
    'Must be greater than {0}.');

Answer 6

Значения даты из текстовых полей можно получить с помощью метода .val () jquery, например

var datestr1 = $('#datefield1-id').val();
var datestr2 = $('#datefield2-id').val();

Я бы настоятельно рекомендовал проанализировать строки дат перед их сравнением. У объекта Date в JavaScript есть метод parse () -, но он поддерживает только форматы дат США (ГГГГ / ММ / ДД). Он возвращает миллисекунды с начала эпохи Unix, поэтому вы можете просто сравнить свои значения с> или <. </p>

Если вам нужны разные форматы (например, ISO 8661), вам нужно прибегнуть к регулярным выражениям или к бесплатной библиотеке date.js.

Если вы хотите быть супер-дружественным к пользователю, вы можете использовать jquery ui datepickers вместо текстовых полей. Существует вариант выбора даты, который позволяет вводить диапазоны дат:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

Answer 7

Поэтому мне нужно, чтобы это правило было необязательным, и ни одно из приведенных выше предложений не является обязательным. Если я вызываю метод, он показывается по мере необходимости, даже если я установил для него нужное значение.

Это мой звонок:

  $("#my_form").validate({
    rules: {
      "end_date": {
        required: function(element) {return ($("#end_date").val()!="");},
        greaterStart: "#start_date"
      }
    }
  });//validate()

Мой addMethod не такой надежный, как у самого лучшего ответа Майка Э., но я использую средство выбора даты JqueryUI для принудительного выбора даты. Если кто-то может сказать мне, как сделать так, чтобы даты были числами и чтобы метод был необязательным, это было бы здорово, но сейчас этот метод работает для меня:

jQuery.validator.addMethod("greaterStart", function (value, element, params) {
    return this.optional(element) || new Date(value) >= new Date($(params).val());
},'Must be greater than start date.');

Answer 8

В javascript / jquery большинство разработчиков использует From & To сравнения дат, которое является строкой, без преобразования в формат даты. Простейший способ сравнения с датой больше, чем с датой:

Date.parse(fromDate) > Date.parse(toDate)

Всегда анализируйте и сравнивайте перед сравнением, чтобы получить точные результаты

Answer 9

jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});

Answer 10

$(document).ready(function(){
   $("#txtFromDate").datepicker({
        minDate: 0,
        maxDate: "+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });

    $("#txtToDate").datepicker({
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });
});

Или посетите эту ссылку