jQuery datepicker mengatur tanggal yang dipilih, dengan cepat


121

Bagaimana saya bisa mengubah tanggal yang dipilih dari jquery Date picker secara dinamis dengan cepat? Saya telah mengatakan membuat pemilih tanggal inline. Kemudian setelah beberapa waktu, saya ingin merefleksikan tanggal yang berbeda di sana tanpa membuat ulang datepicker dari awal.

Saya mencoba metode setDate, tetapi tidak berhasil, dan tidak banyak dokumentasi di dokumen .

Ada plugin lain (diperpanjang?) Di sini , tetapi saya ingin menggunakan plugin yang dikirimkan bersama jquery.ui.all.js.

Jawaban:


187

Versi jQuery-UI apa yang Anda gunakan? Saya telah menguji yang berikut ini dengan 1.6r6, 1.7 dan 1.7.1 dan berhasil:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
gunakan defaultDate sebagai ganti setDate, jika setDate tidak berfungsi.
bingjie2680

8
tapi bagi saya itu tidak berhasil. tanggal diubah. tetapi tanggal yang dipilih tidak muncul di kalender. itu menunjukkan saya hanya hari ini disorot.
Prageeth godage

28

Periksa apakah tanggal yang Anda coba setel berada dalam rentang tanggal yang diizinkan jika opsi minDate atau maxDate disetel.


10

Contoh ini menunjukkan cara menggunakan nilai default di kalender dropdown dan nilai di kotak teks. Ini juga menunjukkan bagaimana mengatur nilai default ke tanggal sebelumnya.

selectedDate adalah variabel lain yang menyimpan tanggal yang dipilih saat ini dari kontrol kalender

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

Tercatat bahwa untuk DatePicker oleh Keith Wood ( http://keith-wood.name/datepickRef.html ) bekerja berikut - perhatikan bahwa pengaturan tanggal default adalah yang terakhir:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

Untuk beberapa alasan, dalam beberapa kasus saya tidak dapat membuat setDate berfungsi.

Solusi yang saya temukan adalah dengan memperbarui atribut nilai dari input yang diberikan. Tentu saja datepicker itu sendiri tidak akan diperbarui tetapi jika yang Anda cari adalah menampilkan tanggal, itu berfungsi dengan baik.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
Ada satu per satu selama berbulan-bulan, jadi Anda perlu (date.getMonth () + 1)
Adam

1
setDate tidak berfungsi jika disetel dalam opsi awal, saya menghubungkannya setelah itu dengan .datepicker ('setDate', ...)
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

akhirnya, itulah yang saya cari selama beberapa jam terakhir! Saya perlu memulai perubahan, bukan hanya tanggal penyiapan di bidang teks!


2
Seharusnya .datepicker()tidak.datePicker()
Arslan Tabassum

3

Ini adalah utas lama tetapi saya hanya ingin memberikan beberapa informasi bagaimana saya telah menggunakannya. Jika Anda ingin mengatur tanggal hari ini, Anda cukup menerapkannya seperti di bawah ini.

 $("#datepickerid").datepicker("setDate", "0");

Jika Anda ingin mengatur beberapa hari sebelum / sesudah tanggal sekarang maka gunakan -/+simbol berapa hari yang Anda inginkan seperti di bawah ini.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate sepertinya hanya menjadi masalah dengan datepicker inline yang digunakan di jquery UI, kesalahan spesifiknya adalah InternalError: terlalu banyak rekursi.


2

Ini bekerja untuk saya:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

Dalam Html Anda dapat menambahkan field input Anda dengan pemilih tanggal seperti ini

<input class="form-control date-picker fromDates" id="myDate" type="text">

dan kemudian di java script, inisialisasi datepicker Anda dan setel nilai Anda ke tanggal seperti ini,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Di sini atribut fromdate menunjukkan tanggal sebelumnya dari tanggal sekarang)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

Jawaban kode-saja tidak disarankan di Stack Overflow karena tidak menjelaskan cara menyelesaikan masalah. Harap edit jawaban Anda untuk menjelaskan fungsi kode dan cara menjawab pertanyaan, sehingga berguna bagi pengguna lain dan juga OP.
FluffyKitten

-1

Saya juga mengalami banyak masalah dengan metode setDate. tampaknya hanya berfungsi di v1. Namun, apa yang tampaknya berhasil adalah menggunakan metode dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

semoga berhasil!


-1

atau Anda bisa memilikinya

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
Seharusnya .datepicker()tidak .datePicker().
Florin Frătică
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.