jQuery Date Picker - nonaktifkan tanggal yang sudah lewat


89

Saya mencoba agar Rentang tanggal memilih menggunakan pemilih tanggal UI.

di bidang dari / ke orang tidak boleh melihat atau memilih tanggal sebelum hari ini.

Ini kode saya:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

Dapatkah seseorang memberi tahu saya cara menonaktifkan tanggal sebelum tanggal sekarang.

Jawaban:


112

Anda harus membuat objek tanggal baru dan mengaturnya seperti minDatesaat Anda menginisialisasi datepickers

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

Sunting - dari komentar Anda sekarang berfungsi seperti yang diharapkan http://jsfiddle.net/nicolapeluchetti/dAyzq/1/


2
Saya ingin menerapkan cara agar orang tidak dapat memilih tanggal yang telah lewat .. seperti kemarin hari sebelumnya, dll. Hanya mulai hari ini dan seterusnya.
Harsha MV

1
@HarshaMV saya memperbarui jawaban saya, Anda harus mengatur minDate ketika Anda menginisialisasi datepickers
Nicola Peluchetti

Anda dapat menambahkan showAnim:"",ke pengaturan datepicker untuk menghapus perubahan bulan dan tahun yang mengganggu saat Anda membuat pilihan.
Misiu

Saya menggunakan skrip Anda, tetapi saya mendapatkan error "Uncaught ReferenceError: $ tidak ditentukan". bagaimana cara memperbaikinya?
mable george

@NicolaPeluchetti Ini persis seperti yang saya butuhkan, tetapi dapatkah ini digunakan di asp: Textbox? Saya sudah mencoba tetapi tidak berhasil, apakah ada perubahan khusus yang harus saya lakukan? Terima kasih sebelumnya
wolfQueen

74

Deklarasikan variabel dateToday dan gunakan fungsi Date () untuk mengaturnya .. kemudian gunakan variabel itu untuk menetapkan ke minDate yang merupakan parameter datepicker.

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

Itu saja ... Jawaban di atas sangat membantu ... teruskan guys ..


Jawaban yang jelas dan lugas .. Terima kasih
ASD

47
$('#datepicker-dep').datepicker({
    minDate: 0
});

minDate:0 bekerja untuk saya.



8

Hanya untuk menambahkan ini:

Jika Anda juga perlu mencegah pengguna mengetik tanggal sebelumnya secara manual, ini adalah solusi yang mungkin. Inilah yang akhirnya kami lakukan (berdasarkan jawaban @Nicola Peluchetti)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

Apa yang dilakukannya adalah mengubah nilai ke tanggal hari ini jika pengguna secara manual mengetik tanggal di masa lalu.


6

Demo Langsung , coba ini,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

5

Ini cara mudah untuk melakukan ini

$('#datepicker').datepicker('setStartDate', new Date());

juga kami dapat menonaktifkan hari-hari mendatang

$('#datepicker').datepicker('setEndDate', new Date());

1
Terima kasih! Anda menghentikan frustrasi berjam-jam.
lmiguelvargasf

4

atur atribut startDate dari datepicker, berfungsi, di bawah ini adalah kode kerja

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

2

Dokumentasi jQuery API - datepicker

Tanggal minimum yang dapat dipilih. Jika disetel ke null, tidak ada minimum.

Beberapa jenis didukung:

Tanggal: Objek tanggal yang berisi tanggal minimum.
Nomor: Jumlah hari dari hari ini. Misalnya 2mewakili two daysdari hari ini dan -1mewakili yesterday.
String: String dalam format yang ditentukan oleh dateFormatopsi, atau tanggal relatif.
Tanggal relatif harus berisi pasangan nilai dan periode; periode yang valid adalah yuntuk years, muntuk months, wuntuk weeks, dan duntuk days. Misalnya, +1m +7dmewakili one month and seven daysdari today.

Agar tidak menampilkan tanggal sebelumnya selain hari ini

$('#datepicker').datepicker({minDate: 0});

2

Atribut " mindate " harus digunakan untuk menonaktifkan tanggal yang lewat di jquery datepicker.

minDate: new Date () Atau minDate: '0' adalah kunci untuk ini.

Ex:

$(function() {
    $( "#datepicker" ).datepicker({minDate: new Date()});
});

ATAU

$(function() {
  $( "#datepicker" ).datepicker({minDate: 0});
});

2

cukup ganti kode Anda:

kode lama:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

kode baru:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

2

Dengan pengaturan startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

1

Saya telah membuat fungsi untuk menonaktifkan tanggal sebelumnya, menonaktifkan hari akhir pekan yang fleksibel (Seperti Sabtu, Minggu)

Kami menggunakan metode beforeShowDay dari plugin jQuery UI datepicker.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

masukkan deskripsi gambar di sini

Di sini tanggal hari ini adalah 15 September. Saya telah menonaktifkan hari Sabtu dan Minggu.


0

Anda harus mendeklarasikan tanggal sekarang menjadi variabel seperti ini

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})

0
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): Fungsi mendapatkan tanggal hari ini tanggal sebelumnya terkunci. 100% bekerja


0

Anda cukup menggunakan

startDate: 'today'

itu bekerja dengan baik untuk saya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.