ตรวจสอบว่าวันที่สิ้นสุดมากกว่าวันที่เริ่มต้นด้วย jQuery

ฉันจะตรวจสอบ / ตรวจสอบความถูกต้องใน jQuery ได้อย่างไรว่าวันที่สิ้นสุด [กล่องข้อความ] มากกว่าวันที่เริ่มต้น [กล่องข้อความ] หรือไม่

เพียงแค่ขยายคำตอบจากฟิวชั่น วิธีการขยายนี้ทำงานโดยใช้ปลั๊กอินตรวจสอบ 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" }
    }
});

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 ในกล่องข้อความวันที่สิ้นสุดของคุณ

เพิ่มบล็อกสคริปต์นี้ในเพจของคุณ: -

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

หวังว่านี่จะช่วยได้ :-)

ฉันเพิ่งแก้ไขคำตอบของดันเต้และพบว่าในขณะที่ตั้งใจดี แต่น่าเสียดายที่เบราว์เซอร์หลายตัวที่ไม่ใช่ 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}.');

ค่าวันที่จากช่องข้อความสามารถดึงได้โดยวิธี .val () ของ jquery เช่น

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

เราขอแนะนำอย่างยิ่งให้แยกวิเคราะห์สตริงวันที่ก่อนเปรียบเทียบ ออบเจ็กต์ Date ของ Javascript มีการแยกวิเคราะห์ () - วิธีการ แต่รองรับเฉพาะรูปแบบวันที่ในสหรัฐอเมริกาเท่านั้น (YYYY / MM / DD) จะคืนค่ามิลลิวินาทีตั้งแต่จุดเริ่มต้นของยุคยูนิกซ์ดังนั้นคุณสามารถเปรียบเทียบค่าของคุณกับ> หรือ <

หากคุณต้องการรูปแบบอื่น (เช่น ISO 8661) คุณต้องใช้นิพจน์ทั่วไปหรือไลบรารี date.js ฟรี

หากคุณต้องการเป็นผู้ใช้ที่ยอดเยี่ยมคุณสามารถใช้ jquery ui datepickers แทน textfields มีตัวแปร datepicker ที่อนุญาตให้ป้อนช่วงวันที่:

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

ดังนั้นฉันจึงต้องการให้กฎนี้เป็นทางเลือกและไม่มีคำแนะนำข้างต้นที่เป็นทางเลือก ถ้าฉันเรียกเมธอดมันจะแสดงตามต้องการแม้ว่าฉันจะตั้งค่าเป็นต้องการค่าก็ตาม

นี่คือสายของฉัน:

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

ของฉันaddMethodไม่แข็งแรงเท่าคำตอบยอดนิยมของ Mike E. แต่ฉันใช้ JqueryUI datepicker เพื่อบังคับให้เลือกวันที่ หากมีใครสามารถบอกวิธีตรวจสอบให้แน่ใจว่าวันที่เป็นตัวเลขและมีวิธีการที่เป็นทางเลือกซึ่งจะดีมาก แต่ตอนนี้วิธีนี้ใช้ได้กับฉัน:

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

ใน javascript / jquery นักพัฒนาส่วนใหญ่ใช้การเปรียบเทียบ From & To date ซึ่งเป็นสตริงโดยไม่ต้องแปลงเป็นรูปแบบวันที่ วิธีที่ง่ายที่สุดในการเปรียบเทียบจากวันที่มากกว่าจนถึงปัจจุบันคือ

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

แยกวิเคราะห์จากและวันที่ก่อนการเปรียบเทียบเสมอเพื่อให้ได้ผลลัพธ์ที่ถูกต้อง

ฉันชอบสิ่งที่ Franz พูดเพราะเป็นสิ่งที่ฉันใช้: 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;
}

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

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 nation แยกวิเคราะห์เป็นจำนวนเต็ม จากนั้นเปรียบเทียบค่าสองค่าในคำสั่ง 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");

หากรูปแบบได้รับการรับรองว่าถูกต้องปปปป / ดด / ววและเหมือนกันทุกประการระหว่างสองฟิลด์คุณสามารถใช้:

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

เป็นการเปรียบเทียบสตริง