jQuery를 사용하여 종료 날짜가 시작 날짜보다 큰지 확인

jQuery를 사용하여 종료 날짜가 시작 날짜보다 큰지 확인

jQuery에서 종료 날짜 [텍스트 상자]가 시작 날짜 [텍스트 상자]보다 큰지 여부를 확인/검증하려면 어떻게 해야 합니까?

융합을 확장하는 것이 답입니다.이 확장 메서드는 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" }
    }
});

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

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

그 정도면 충분할 것 같습니다.

파티에 조금 늦었지만 여기 제 파트가 있습니다.

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

jquery.validate.js 및 jquery-1.2.6.js 참조.startDate 클래스를 시작 날짜 텍스트 상자에 추가합니다.endDate 클래스를 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>

이것이 도움이 되길 바랍니다 :-)

저는 단지 Danteuno의 대답을 만지작거리다가 좋은 의도는 있지만 슬프게도 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}.');

그래서 저는 이 규칙이 선택사항이 되어야 했고 위의 제안들 중 어떤 것도 선택사항이 아닙니다.메소드를 호출하면 값이 필요하다고 설정해도 필요에 따라 표시됩니다.

제 전화입니다.

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

나의addMethod마이크 E.의 최고 답변만큼 강력하지는 않지만, 저는 Jquery를 사용하고 있습니다.UI 날짜 선택기를 사용하여 날짜를 강제로 선택합니다.날짜가 숫자인지 확인하는 방법과 방법을 선택적으로 사용할 수 있도록 하는 방법을 알려줄 수 있다면 좋겠지만, 지금은 이 방법이 저에게 효과가 있습니다.

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.');

텍스트 필드의 날짜 값은 jquery의 .val() 메서드로 가져올 수 있습니다.

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

날짜 문자열을 비교하기 전에 구문 분석하는 것이 좋습니다.Javascript의 Date 개체는 parse()-Method를 사용하지만 US 날짜 형식(YYY/MM/DD)만 지원합니다.unix epoch가 시작된 이후의 밀리초를 반환하므로 > 또는 <과 값을 간단히 비교할 수 있습니다.

다른 형식(예: ISO 8661)을 사용하려면 정규식 또는 free date.js 라이브러리를 사용해야 합니다.

만약 당신이 매우 사용자 친화적이 되고 싶다면, 당신은 텍스트 필드 대신 jquery uiate pickers를 사용할 수 있습니다.날짜 범위를 입력할 수 있는 날짜 선택기 변형이 있습니다.

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

javascript/jquery에서 대부분의 개발자가 날짜 형식으로 변환하지 않고 문자열인 From & To date 비교를 사용합니다.날짜부터 비교하는 가장 간단한 방법은 날짜부터 비교하는 것보다 큽니다.

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

정확한 결과를 얻기 위해 항상 비교 전의 날짜와 날짜를 구문 분석합니다.

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

또는 이 링크 방문

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

저는 프란츠가 말한 것을 좋아합니다. 왜냐하면 제가 사용하는 것이기 때문입니다. :

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

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

이것이 도움이 되기를 바랍니다 :)

먼저 분할 함수를 사용하여 두 입력 상자의 값을 분할합니다.그 다음에는 역순으로 동일하게 concat합니다. concatation이 그것을 정수로 구문 분석한 후에.그런 다음 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 {

}

이것은 효과가 있을 것입니다.

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

이렇게 두 가지 다른 날짜에 경고를 할 수 있습니다.

$('#end_date').on('change', function(){
             var startDate = $('#start_date').val();
             var endDate = $('#end_date').val();
             if (endDate < startDate){
                 alert('End date should be greater than Start date.');
                $('#end_date').val('');
             }
         });

일정관리에서 수행할 수 있으면 이전 날짜가 자동으로 비활성화됩니다.

$("#start_date").datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(date) {
                $("#end_date").datepicker('option', 'minDate', date);
            }
        });
$("#end_date").datepicker({ dateFormat: 'dd/mm/yy' });

형식이 YYYY/MM/DD가 올바르고 두 필드 간에 정확히 동일해야 하는 경우 다음을 사용할 수 있습니다.

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

문자열 비교로

언급URL : https://stackoverflow.com/questions/833997/validate-that-end-date-is-greater-than-start-date-with-jquery