Rabu, 05 Oktober 2022

Setel tanggal agar awalnya kosong di bootstrap-datepicker

 Saya menggunakan bootstrap-datepicker di situs saya. Datepicker akan digunakan untuk mendefinisikan filter pencarian. Saya perlu nilai awal elemen input datepicker kosong, jadi tidak akan memperkenalkan filter tanggal untuk hasil pencarian. Ketika pengguna mengklik input teks yang ditautkan ke Datepicker, kotak popup Datepicker harus memilih hari pertama bulan berikutnya.

Masalah: Jika saya menetapkan tanggal awal (seperti yang ditunjukkan di bawah), input teks akan diisi dengan tanggal hari ini yang bukan yang saya inginkan. Namun jika saya tidak menetapkan tanggal awal, datepicker akan menampilkan tahun 1970-an. Apa yang harus saya lakukan?

Mirip dengan: Demo untuk jQueryUI Datepicker

Kode JS

var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();

Kode HTML

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />

Upaya Gagal

Datepicker tidak muncul saat mengklik el input teks

$(function() {

var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(''); // clear the date filter
$('#listing_filter_available').click( function() {
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
});

});
  

Saya baru saja menemukan kasus penggunaan yang sangat mirip. Dengan beberapa tweak untuk bootstrap-datepicker.js, saya yakin saya telah membuatnya berfungsi. 

Anda harus mengedit skrip di dua tempat.

Untuk bidang tanggal, saya memeriksa untuk melihat apakah tanggal (tanggal ini) ditetapkan ke tanggal mulai Unix (. Mis. Tanggal kosong). Jika demikian, keluar dan biarkan bidang itu kosong.

(baris: 95 - kira-kira)

setValue: function () {
// EDIT - Don't setValue if date = unix date start
if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
// END EDIT

Untuk kalender drop-down, saya juga memeriksa untuk melihat apakah tanggal (this.date) diatur ke tanggal mulai Unix. Jika demikian, atur tanggal ke hari ini. Saya melakukan ini sehingga ketika pengguna mengklik bidang tanggal, ini menampilkan bulan saat ini sebagai lawan dari Februari 1970.

(baris: 144 - kira-kira) 

isi: function () {

// EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
// original code
// var d = new Date(this.viewDate),
// END EDIT

Saya percaya hanya itu yang perlu Anda lakukan. Saya baru saja menerapkan ini dalam solusi saya, jadi jika ada yang menemukan masalah atau memiliki saran yang lebih baik, saya akan senang mendengarnya.

Ada cara yang lebih mudah untuk melakukan ini! Untuk menetapkan nilai 

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

Untuk menetapkan nilai kosong

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');  

Saya bekerja dengan bootstrap v3.1.1 dan 

$('#listing_filter_available').datepicker('setValue', nextMonth);

tidak bekerja untuk saya. 

Anda harus menggunakan

$('#listing_filter_available').datepicker('setDate', nextMonth);

untuk mengisi kontrol datepicker



sumber : 

https://www.pengembangan-web-mp-pd.com/id/javascript/setel-tanggal-agar-awalnya-kosong-di-bootstrap-datepicker/1066807054/

Tidak ada komentar:

Posting Komentar