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


Ответы:


177

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

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

Как использовать это с двумя текстовыми полями?
Cros

1
Мне пришлось немного изменить его, чтобы разрешить пустые даты окончания в моем приложении, но это сделало большую часть. codeесли (значение == 0) {вернуть истину; } else if (! / Invalid | NaN / ...code
Франк Люк

3
Предупреждение об ОШИБКЕ: я понимаю, что вопрос касается дат, но этот код не будет работать с числами, как указано в рекламе. Я добавил ответ, объясняющий, почему и как, который также включает исправление.
Джон

1
@Cros jQuery.validator.addMethod ("zip_code_checking", function (value, element) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* конец почтового индекса значение должно быть больше начального значения почтового индекса ");
Balasuresh Asaithambi

Это приводит к ошибке в Google Chrome. Если вы передадите значение меньше 12 или больше 31, оно будет проанализировано как дата и, следовательно, также будет проверено как дата. Пришлось разделить это на два метода (торопился), но хотелось бы найти более подходящее решение!
sbsatter

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

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

Я думаю, это должно сработать


Правильно? Спасибо! Плагин не нужен. : P
Vael Victus

1
приятно и легко реализовать, хотя jQuery.validate великолепен
mknopf 08

Большое спасибо .. так просто.
Нимит Джоши

единственная проблема заключается в том, что у вас есть диапазон дат, охватывающий два года, например. С 27.06.2015 по 02.02.2016 .... он не будет правильно подтвержден
Himansz

Такой диапазон дат охватывает два года, например. С 27.06.2015 по 02.02.2016, правильно подтверждено для меня.
Thamarai T

19

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

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

14

Ссылка на 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>

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


мне нравится эта техника
wahmal 06

13

Я просто возился с ответом Дантеуно и обнаружил, что, хотя и с добрыми намерениями, к сожалению, он сломан в нескольких браузерах, которые не являются 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}.');

это работает в IE, но не может заставить его работать в Opera и FF, есть идеи?
Codded


5

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

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

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

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

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

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


5

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

Это мой призыв:

  $("#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.');

4

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

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

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


Это не дает ответа на вопрос. Как только у вас будет достаточная репутация, вы сможете комментировать любой пост ; вместо этого предоставьте ответы, которые не требуют пояснений от спрашивающего . - Из обзора
Мамун

Это решение вопроса. Я попробовал и ответил.
Кунал Брахме

2

Мне нравится то, что сказал Франц, потому что я использую это: P

var date_ini = new Date($('#id_date_ini').val()).getTime();
var date_end = new Date($('#id_date_end').val()).getTime();
if (isNaN(date_ini)) {
// error date_ini;
}
if (isNaN(date_end)) {
// error date_end;
}
if (date_ini > date_end) {
// do something;
}

2
$(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)
        }
    });
});

Или перейдите по этой ссылке



1
function endDate(){
    $.validator.addMethod("endDate", function(value, element) {
      var params = '.startDate';
        if($(element).parent().parent().find(params).val()!=''){
           if (!/Invalid|NaN/.test(new Date(value))) {
               return new Date(value) > new Date($(element).parent().parent().find(params).val());
            }
       return isNaN(value) && isNaN($(element).parent().parent().find(params).val()) || (parseFloat(value) > parseFloat($(element).parent().parent().find(params).val())) || value == "";              
      }else{
        return true;
      }
      },jQuery.format('must be greater than start date'));

}

function startDate(){
            $.validator.addMethod("startDate", function(value, element) {
            var params = '.endDate';
            if($(element).parent().parent().parent().find(params).val()!=''){
                 if (!/Invalid|NaN/.test(new Date(value))) {
                  return new Date(value) < new Date($(element).parent().parent().parent().find(params).val());
            }
           return isNaN(value) && isNaN($(element).parent().parent().find(params).val()) || (parseFloat(value) < parseFloat($(element).parent().parent().find(params).val())) || value == "";
                 }
                        else{
                     return true;
}

    }, jQuery.format('must be less than end date'));
}

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


0

Сначала вы разделяете значения двух полей ввода с помощью функции разделения. затем объедините то же самое в обратном порядке. после объединения нации проанализируйте его до целого числа. затем сравните два значения в инструкции if. например, 1> 20-11-2018 2> 21-11-2018

после разделения и объединения новых значений для сравнения 20181120 и 20181121 после этого сравните то же самое.

var date1 = $('#datevalue1').val();
var date2 = $('#datevalue2').val();
var d1 = date1.split("-");
var d2 = date2.split("-");

d1 = d1[2].concat(d1[1], d1[0]);
d2 = d2[2].concat(d2[1], d2[0]);

if (parseInt(d1) > parseInt(d2)) {

    $('#fromdatepicker').val('');
} else {

}

Пожалуйста, добавьте объяснение этого решения
Ян Черны

0

это должно работать

$.validator.addMethod("endDate", function(value, element) {
            var startDate = $('#date_open').val();
            return Date.parse(startDate) <= Date.parse(value) || value == "";
        }, "* End date must be after start date");


-2

Если формат гарантированно правильный ГГГГ / ММ / ДД и точно такой же в двух полях, вы можете использовать:

if (startdate > enddate) {
   alert('error'
}

Как сравнение строк


как определить начальную и конечную дату в jquery?
ввод

Я предполагаю, что это обычные струны. Вы читаете их так: $ (# startdate: input) .val () и $ (# enddate: input) .val ()
Надя Альрамли
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.