Bạn vào trang web daterangepicker.com và bấm vào nút Download Zip để bấm tải thư viện của daterangepicker về và lưu vào server web của bạn.
Nếu không muốn tải về thì bạn có thể dùng trực tiếp bằng cách thêm vào mấy dòng dưới đây.
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />Hãy tạo một file js và thêm vào nó đoạn code bên dưới.
$('.rangedatepicker').daterangepicker({
alwaysShowCalendars: true,
locale: {
format: 'YYYY-MM-DD',
},
ranges: {
'Today' : [moment(), moment()],
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().startOf('month'),
endDate : moment().endOf('month'),
});Ở trên tôi sẽ sử dụng class rangedatepicker để gọi hàm daterangepicker trong input html. Nên trong input html mà bạn muốn hiển thị daterangepicker thì bạn chỉ cần thêm vào class rangedatepicker là được.
Nhiệm vụ chính của plugin daterangepicker này dĩ nhiên là chọn khoảng thời gian nhưng ngoài ra nó còn có thể làm nhiều hơn thế. Có một số thiết lập dưới đây giúp bạn không cần phải dùng thêm bất cứ plugin nào khác trong việc hiển thị chọn ngày tháng.
Ở trên bạn chỉ có thể hiển thị date range trong một input field html duy nhất thôi, vậy muốn hiển thì ngày bắt đầu và ngày kết thúc ở 2 input field khác nhau thì chúng ta có đoạn code sau.
if($('.datepickerBegin, .datepickerEnd').length){
// check if element is available to bind ITS ONLY ON HOMEPAGE
var currentDate = moment().format("DD-MM-YYYY");
$('.datepickerBegin, .datepickerEnd').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
"alwaysShowCalendars": true,
//"minDate": currentDate,
//singleDatePicker: true,
showDropdowns: true,
autoApply: false,
autoUpdateInput: false,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, function(start, end, label) {
var selectedStartDate = start.format('YYYY-MM-DD'); // selected start
var selectedEndDate = end.format('YYYY-MM-DD'); // selected end
$checkinInput = $('.datepickerBegin');
$checkoutInput = $('.datepickerEnd');
// Updating Fields with selected dates
$checkinInput.val(selectedStartDate);
$checkoutInput.val(selectedEndDate);
// Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
var checkOutPicker = $checkoutInput.data('daterangepicker');
checkOutPicker.setStartDate(selectedStartDate);
checkOutPicker.setEndDate(selectedEndDate);
// Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
var checkInPicker = $checkinInput.data('daterangepicker');
checkInPicker.setStartDate(selectedStartDate);
checkInPicker.setEndDate(selectedEndDate);
});
}Và để code trên hoạt động thì ở input hiển thị ngày bắt đầu bạn thêm vào class datepickerBegin và tại input field hiển thị ngày kết thúc bạn thêm vào class datepickerEnd.
Với lựa chọn ngày sinh nhật, chúng ta sẽ có một số thiết lập khác biệt so với việc lựa chọn ngày bình thường. Có thể kể đến như việc giới hạn năm nhỏ nhất để chọn cho sinh nhật, ví dụ nhập sinh nhật nhân viên thì không ai nhập nhân viên trên 80 tuổi chẳng hạn. Lúc này ta sẽ để năm sao cho không vượt quá 80 tuổi.
$('.birthdaypicker').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10),
drops: "auto",
autoUpdateInput: false,
locale: {
format: 'YYYY-MM-DD',
},
});
$('.birthdaypicker').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD'));
});
$('.birthdaypicker').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});Các thiết lập datepicker và daterangepicker của bạn ở trên chỉ hoạt động trong trường hợp đó là input field tĩnh, còn trường hợp input field động được bạn thêm vào bằng javascript hoặc jquery thì hoàn toàn không có tác dụng.
Lúc này bạn phải điều chỉnh đôi chút để datepicker của bạn có thể chạy với dynamic input field.
$(document).on('focus','.datepicker',function(){
$('.datepicker').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
drops: "auto",
autoUpdateInput: false,
autoApply: true,
locale: {
format: 'YYYY-MM-DD',
},
});
$('.datepicker').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD'));
});
$('.datepicker').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});Đó là tất cả những gì daterangepicker có và nó giúp bạn không cần phải dùng thêm bất cứ plugin nào khác để làm datepicker cho input field.
You need to login in order to like this post: click here
YOU MIGHT ALSO LIKE
