weBer weBer - 3 years ago 80
Javascript Question

How to target bootstrap datepicker's its own '.datepicker-dropdown' when there is multiple datepickers in a page.?(without container option)

In my project - which is a App, I have multiple datepicker which is Version 2.0. My Client wants me to customise my datepicker by showing the date of the calendar top, so I did some tweaks, it is working on the page with one datepicker but it's an another story when it comes to multiple datepicekers on one page.my code is as follows.

$(elem).datepicker(options);
//Customized Datepicker Plugin 03/07/2017
//Author - Jithin Raj
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$(elem).on('show', function() {
var cPicVal = '',
yPicVal = '';
if ($('.datepicker-dropdown').find('.new-date-wrap').length <= 0) {
$('.datepicker-dropdown').prepend('<div class="new-date-wrap"><div class="custom-year-pic-view"><span></span></div><div class="custom-day-pic-view"><span></span></div></div>');
}
if ($(elem).val() == '') {
cPicVal = (Date.parse(today).toString('ddd, MMM dd'));
yPicVal = (Date.parse(today).toString('yyyy'));
} else {
cPicVal = (Date.parse($(elem).val()).toString('ddd, MMM dd'));
yPicVal = (Date.parse($(elem).val()).toString('yyyy'));
}
$('.custom-day-pic-view').find('span').text(cPicVal);
$('.custom-year-pic-view').find('span').text(yPicVal);
});
});


Can anyone suggest me a another fullprofe method, thankyou Cheers..

Answer Source

I think I found an answer.

I changed my code a little bit and added moment.js and now it's working all over my app.

$(elem).datepicker(options);
 //Customized Datepicker Plugin 03/07/2017
 //Author - Jithin Raj
   var date = new Date();
   var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
   $(elem).on('show', function() {
              var cPicVal = '',
              yPicVal = '';
              elem = $(this)
            if ($('.datepicker-dropdown').find('.new-date-wrap').length <= 0) {
                    $('.datepicker-dropdown').prepend('<div class="row-fluid new-date-wrap"><div class="row-fluid custom-year-pic-view"><span></span></div><div class="row-fluid custom-day-pic-view"><span></span></div></div>');
            }
            if ($(elem).val() == '') {
                    cPicVal = (moment(today).format('ddd, MMM DD'));
                    yPicVal = (moment(today).format('YYYY'));
            } else {
                    cPicVal = (moment($(elem).val()).format('ddd, MMM DD'));
                    yPicVal = (moment($(elem).val()).format('YYYY'));
            }
            $('.custom-day-pic-view').find('span').text(cPicVal);
            $('.custom-year-pic-view').find('span').text(yPicVal);
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download