Validasi bahwa tanggal akhir lebih besar dari tanggal mulai dengan jQuery

Bagaimana cara memeriksa / memvalidasi di jQuery apakah tanggal akhir [kotak teks] lebih besar dari tanggal mulai [kotak teks]?

Hanya memperluas jawaban fusi. Metode ekstensi ini bekerja menggunakan plugin jQuery validate. Ini akan memvalidasi tanggal dan angka

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

Untuk menggunakannya:

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

atau

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

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

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

Itu harus dilakukan, saya pikir

Sedikit terlambat ke pesta tapi ini bagian saya

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

Berikut detailnya:

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

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

Referensi jquery.validate.js dan jquery-1.2.6.js. Tambahkan kelas startDate ke kotak teks tanggal mulai Anda. Tambahkan kelas endDate ke kotak teks tanggal akhir Anda.

Tambahkan blok skrip ini ke halaman Anda: -

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

Semoga ini membantu :-)

Saya baru saja mengotak-atik jawaban danteuno dan menemukan bahwa meskipun bermaksud baik, sayangnya itu rusak di beberapa browser yang bukan IE. Ini karena IE akan sangat ketat tentang apa yang diterimanya sebagai argumen untuk Datekonstruktor, tetapi yang lain tidak. Misalnya, Chrome 18 memberi

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

Hal ini menyebabkan kode mengambil jalur "bandingkan tanggal" dan semuanya menurun dari sana (misalnya new Date("11")lebih besar dari new Date("66")dan ini jelas merupakan kebalikan dari efek yang diinginkan).

Oleh karena itu, setelah pertimbangan saya memodifikasi kode untuk memberikan prioritas pada jalur "angka" di atas jalur "tanggal" dan memvalidasi bahwa input memang numerik dengan metode yang sangat baik yang disediakan dalam Memvalidasi angka desimal di JavaScript - IsNumeric () .

Akhirnya kodenya menjadi:

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

Nilai tanggal dari bidang teks dapat diambil dengan Metode .val () jquery seperti

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

Saya sangat menyarankan untuk mengurai string tanggal sebelum membandingkannya. Objek Tanggal Javascript memiliki metode parse () -, tetapi hanya mendukung format tanggal AS (YYYY / MM / DD). Ini mengembalikan milidetik sejak awal zaman unix, jadi Anda cukup membandingkan nilai Anda dengan> atau <.

Jika Anda menginginkan format yang berbeda (misalnya ISO 8661), Anda perlu menggunakan ekspresi reguler atau pustaka date.js gratis.

Jika Anda ingin menjadi super user-fiendly, Anda dapat menggunakan jquery ui datepickers sebagai ganti textfields. Ada varian pemilih tanggal yang memungkinkan untuk memasukkan rentang tanggal:

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

Jadi saya perlu aturan ini bersifat opsional dan tidak ada saran di atas yang bersifat opsional. Jika saya memanggil metode itu akan ditampilkan sebagai diperlukan bahkan jika saya mengaturnya untuk membutuhkan nilai.

Ini panggilan saya:

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

Saya addMethodtidak sekuat jawaban teratas Mike E., tapi saya menggunakan datepicker JqueryUI untuk memaksa pemilihan tanggal. Jika seseorang dapat memberi tahu saya cara memastikan tanggalnya adalah angka dan memiliki metode opsional yang akan bagus, tetapi untuk saat ini metode ini berfungsi untuk saya:

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

Pada javascript / jquery sebagian besar developer menggunakan perbandingan From & To date yang berupa string, tanpa mengubahnya menjadi format tanggal. Cara termudah untuk membandingkan dari tanggal lebih besar dari tanggal adalah.

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

Selalu parsing dari dan hingga tanggal sebelum perbandingan untuk mendapatkan hasil yang akurat

Saya suka apa yang dikatakan Franz, karena itulah yang saya gunakan: 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)
        }
    });
});

Atau Kunjungi tautan ini

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

Semoga ini bisa membantu :)

Pertama, Anda memisahkan nilai dari dua kotak input dengan menggunakan fungsi split. lalu gabungkan hal yang sama dalam urutan terbalik. setelah bangsa concat, parsing menjadi integer. lalu bandingkan dua nilai dalam pernyataan in if. mis. 1> 20-11-2018 2> 21-11-2018

setelah split dan concat nilai baru untuk perbandingan 20181120 dan 20181121 selanjutnya bandingkan sama.

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 {

}

ini seharusnya berhasil

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

Jika format dijamin benar YYYY / MM / DD dan sama persis di antara kedua kolom maka Anda dapat menggunakan:

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

Sebagai pembanding string