http://eonasdan.github.io/bootstrap-datetimepicker/
Hai
Saya mencoba menggunakan opsi tanggal min max tetapi tidak yakin bagaimana cara menggunakannya karena dokumentasi tidak memberikan contoh kode.
Saya menemukan di stackoverflow bahwa Anda dapat melakukan ini:
minTanggal: momen()
Tetapi itu melempar kesalahan bahwa momen tidak didefinisikan.
Saya menduga itu tidak dapat menemukan moment.js yang disertakan pada halaman, jika tidak, plugin tidak akan berfungsi.
Apa yang ingin saya capai adalah menonaktifkan 10 hari sebelum hari ini dan menampilkan 30 hari dari hari ini.
Terima kasih
Here is the code (I have removed everything except whats important to simply show the code):
window[ns] = window[ns] || {};
(function ($, moment, app) {
'use strict';
// Private Methods
var nameSpace = 'global',
globalDataObject = null,
notifyRenderCallbacks = function (pageName) {
if ($('.js-calendar').length) {
$('.js-calendar').datetimepicker({
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
icons: {
next: 'icon icon-chevronright',
previous: 'icon icon-chevronleft'
},
enabledDates: moment().add(30, 'days')
});
}
},
// If this module requires global data
app.register(nameSpace, initialize);
}(jQuery, moment, window[ns] || {}));
Untuk menjawab pertanyaan saya. Kerangka kerja yang digunakan mengharuskan Anda untuk menambahkan momen ke file konfigurasi jika tidak maka tidak akan memungkinkan untuk menggunakan http://momentjs.com/ atau JS lainnya - berbicara dengan orang yang mengatur kerangka kerja dan mereka melakukannya untuk alasan keamanan.
Jawaban Kasun benar, tetapi cara yang lebih baik untuk melakukan ini adalah dengan menggunakan Moment.js karena datetimepicker menggunakan JS ini.
Jadi untuk menjawab bagian ke-2 yaitu menonaktifkan 10 hari sebelum hari ini dan menampilkan 30 hari dari hari ini Anda perlu mengatur opsi seperti di bawah ini. Saya tidak perlu melakukan 10 hari sebelumnya tetapi hanya ingin sejumlah hari yang tersedia untuk dipilih. Saya telah menambahkan komentar untuk memperjelas tetapi seharusnya tidak ada di sana.
$mydatepicker.datetimepicker({
minDate: moment(), // Current day
maxDate: moment().add(30, 'days'), // 30 days from the current day
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
Apa yang akan dilakukan di atas adalah mengaktifkan semua hari antara minDate dan maxDate.
Anda juga bisa langsung memasukkan rentang tanggal:
$mydatepicker.datetimepicker({
minDate: moment("12/01/2015"),
maxDate: moment("12/30/2015"),
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
Dan ini akan menonaktifkan semua hari sebelum dan sesudah tanggal yang Anda masukkan ke dalam moment().
Ini bukan bagian dari pertanyaan tetapi saya ingin menampilkan hari saat ini dalam nilai input ketika kalender dimuat tetapi tidak mau't, sebaliknya akan menampilkan teks placeholder. Saya pikir itu karena penggunaan jika minDate jadi saya hanya menggunakan jQuery untuk mengganti nilai input.
$datepickerInput.val(moment());
var todayDate = new Date().getDate();
$('#element').datetimepicker({
timepicker:false,
formatDate:'Y/m/d',
minDate: new Date(),
maxDate: new Date(new Date().setDate(todayDate + 30))
});
Dengan menggunakan contoh ini Anda dapat memberikan pilihan kepada pengguna untuk memilih tanggal antara hari ini dan 30 hari ke depan tanpa menggunakan momentjs. Anda dapat memberikan nilai minDate dan maxDate sesuai dengan keinginan Anda. Sebagai contoh jika Anda ingin memberikan pilihan antara 30 hari terakhir hingga 30 hari ke depan, maka aturlah
minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))