Merubah Daterange picker AdminLTE menjadi Single Datepicker

Seperti yang Anda ketahui ketika menggunakan AdminLTE terdapat sebuah plugins untuk menampilkan tanggal berdasarkan range tertentu. Tetapi dalam kasus tertentu misalnya Anda ingin menampilkan tanggal bukan berdasarkan nilai range tertentu, hanya sebatas ingin memilih tanggal .

Untuk dapat Merubah Daterange picker AdminLTE menjadi Single Datepicker caranya cukup mudah.

Pertama buat terlebih dahulu kostum javascript untuk pemanggilan fungsi tanggal supaya nantinya Daterang picker dirubah supaya memilih tanggal tanpa harus menentukan range tanggal dari tanggal tertentu ke tanggal tertentu seperti berikut :


  $('#datepicker').daterangepicker({
			  singleDatePicker: true, // Set to true to allow selecting a single date
			  showDropdowns: true, // Optionally show dropdowns for month and year selection
			  autoApply: true, // Automatically apply the selected date when clicked
			  autoUpdateInput: false, // Disable auto-updating the input field
			  locale: {
			    format: 'YYYY-MM-DD', // Specify the date format
			  },
			});
			$('#datepicker').on('apply.daterangepicker', function (ev, picker) {
			  $(this).val(picker.startDate.format('YYYY-MM-DD'));
			});
			
			$('#datepicker2').daterangepicker({
			  singleDatePicker: true, // Set to true to allow selecting a single date
			  showDropdowns: true, // Optionally show dropdowns for month and year selection
			  autoApply: true, // Automatically apply the selected date when clicked
			  autoUpdateInput: false, // Disable auto-updating the input field
			  locale: {
			    format: 'YYYY-MM-DD', // Specify the date format
			  },
			});
			$('#datepicker2').on('apply.daterangepicker', function (ev, picker) {
			  $(this).val(picker.startDate.format('YYYY-MM-DD'));
			});

Selanjutnya panggil id dari tanggal bersangkutan pada form yang diinginkan seperti berikut :


<div class="form-group">
	<label>Dari tanggal:</label>
		<div class="input-group">
		<div class="input-group-prepend">
		 <span class="input-group-text">
				<i class="far fa-calendar-alt"></i>
					</span>
						</div>
				 <input type="text" name="tanggal_mulai" class="form-control float-right" id="datepicker">
		 </div>
</div>

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Merubah Daterange picker AdminLTE menjadi Single Datepicker

0 Response to "Merubah Daterange picker AdminLTE menjadi Single Datepicker"

Post a Comment