Validasi bahwa tanggal akhir lebih besar dari tanggal mulai dengan jQuery

Jawaban:

177

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" }
    }
});
Mike E.
sumber
Bagaimana Anda menggunakan ini dengan dua kotak teks?
Melintasi
1
Saya harus memodifikasinya sedikit untuk memungkinkan tanggal akhir kosong di aplikasi saya, tetapi ini melakukan sebagian besar. codejika (nilai == 0) {return true; } else if (! / Invalid | NaN / ...code
Frank Luke
3
Peringatan BUG: Saya menyadari pertanyaannya adalah tentang tanggal, tetapi kode ini tidak akan berfungsi untuk angka seperti yang diiklankan. Saya telah menambahkan jawaban yang menjelaskan mengapa dan bagaimana yang juga termasuk perbaikannya.
Jon
1
@Cros jQuery.validator.addMethod ("zip_code_checking", function (nilai, elemen) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* Akhir kode pos nilai harus lebih besar dari nilai awal kode pos ");
Balasuresh Asaithambi
Ini menghasilkan kesalahan di Google chrome. Jika Anda meneruskan nilai kurang dari 12 atau lebih besar dari 31, nilai tersebut akan diurai sebagai tanggal, dan karenanya divalidasi sebagai tanggal juga. Saya harus memisahkan ini menjadi dua metode (terburu-buru), tetapi saya ingin menemukan solusi yang lebih cocok!
sbsatter
84
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

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

Itu harus dilakukan, saya pikir

Shane O'Grady
sumber
Baik? Terima kasih! Tidak perlu plugin. : P
Vael Victus
1
bagus dan mudah diterapkan, meskipun jQuery.validate luar biasa
mknopf
Terima kasih banyak .. sangat mudah.
Nimit Joshi
satu-satunya masalah adalah ketika Anda memiliki rentang tanggal yang mencakup dalam dua tahun misalnya. 27-06-2015 hingga 02-02-2016 .... itu tidak akan divalidasi dengan benar
Himansz
Rentang tanggal tersebut mencakup dalam dua tahun misalnya. 27-06-2015 hingga 02-02-2016, divalidasi dengan benar untuk saya.
Thamarai T
19

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");
}
Kamran Ahmed
sumber
14

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

Russell Giddings
sumber
saya suka teknik ini
wahmal
13

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}.');
Jon
sumber
ini bekerja di ie tetapi tidak bisa membuatnya bekerja di opera dan FF, ada ide?
Dikodekan
: Muncul dengan kesalahan validasi meskipun tanggal akhir yang dipilih adalah setelah tanggal mulai yang dipilih
Dikodekan
5

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/

Franz
sumber
5

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

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

Kunal Brahme
sumber
Ini tidak memberikan jawaban atas pertanyaan tersebut. Setelah memiliki reputasi yang memadai, Anda dapat mengomentari kiriman apa pun ; sebagai gantinya, berikan jawaban yang tidak memerlukan klarifikasi dari penanya . - Dari Ulasan
Mamun
Ini adalah solusi untuk pertanyaan. Saya telah mencoba dan menjawab.
Kunal Brahme
2

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;
}
StefanNch
sumber
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)
        }
    });
});

Atau Kunjungi tautan ini

kendor
sumber
2
jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});
Atchyut Nagabhairava
sumber
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'));
}

Semoga ini bisa membantu :)

Santosh Kori
sumber
0

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 {

}
Suraj Khot
sumber
Silakan tambahkan penjelasan tentang solusi ini
Jan Černý
0

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

Bagaskara
sumber
-2

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

Nadia Alramli
sumber
bagaimana cara mendefinisikan tanggal mulai dan tanggal akhir di jquery?
masukan
Saya berasumsi bahwa mereka adalah string biasa. Anda membacanya seperti itu $ (# startdate: input) .val () dan $ (# enddate: input) .val ()
Nadia Alramli