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.

jquery jquery-ui datepicker uidatepicker jquery-ui-datepicker Harsha MV
sumber

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/

Nicola Peluchetti
sumber
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 ..

Sachin
sumber
Jawaban yang jelas dan lugas .. Terima kasih
ASD
47 
$('#datepicker-dep').datepicker({
    minDate: 0
});

minDate:0 bekerja untuk saya.

Riya Travel
sumber
20

Gunakan opsi "minDate" untuk membatasi tanggal paling awal yang diizinkan. Nilai "0" berarti hari ini (0 hari dari hari ini): 

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

Dokumen di sini: http://api.jqueryui.com/datepicker/#option-minDate

Mosin
sumber
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.

PålOliver
sumber
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);                             
     }
   });
hari
sumber
5

Ini cara mudah untuk melakukan ini

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

juga kami dapat menonaktifkan hari-hari mendatang

$('#datepicker').datepicker('setEndDate', new Date());
Sameera Prasad Jayasinghe
sumber
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');
});
})
Anna
sumber
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});
Mohammad Faisal
sumber
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});
});
sreekanth.dll
sumber
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
});
pengguna5663780
sumber
2

Dengan pengaturan startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});
kheengz
sumber
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
    });
Luaskan cuplikan

masukkan deskripsi gambar di sini

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

Smit Patadiya
sumber
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)
    });
})
hoga98.dll
sumber
0 
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

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

Muhammad Usman Nasir
sumber
0

Anda cukup menggunakan

startDate: 'today'

itu bekerja dengan baik untuk saya.

Moaz Ateeq
sumber