dynamic date formats in eyecon's Bootstrap Datepicker

Question

I need to update my datepickers' date format (mm.dd.yyyy etc) using a select box.

I am currently using Eyecon's Bootstrap Datepicker because it had the smallest files size that I could find (8k minified), and includes the date formats I need. I also tried to trigger date format changes in several other datepickers without any success.

Fiddle: http://jsfiddle.net/Yshy7/8/

Is there an obvious way to trigger a change from the select box to the datepickers?

//date format
var dateFormat = $('#custom_date_format').val() || "mm/dd/yyyy";
$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
});

//start and end dates
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('.j-start-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    //return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate());
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('.j-end-date')[0].focus();
}).data('datepicker');

var checkout = $('.j-end-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');

Answer 1

Despite that it is not an obvious solution, to have full support to dynamic format change (including internationalized forms like dd-mm-yyyy) with the Eyecon's Bootstrap Datepicker, you need to change its script to make the internal DPGlobal variable accessible to the outer world, as it has been done with the Eternicode's Bootstrap Datepicker.

To achieve it, you can manually add the following line to the datepicker's unminified .js:

$.fn.datepicker.DPGlobal = DPGlobal; //place it after the DPGlobal initialization

You can now minify the .js (using any known online minifier tool) and use it in your project with the full suport.

Using the updated .js file, you will be able to do what you want with the following code:

$('#custom_date_format').change(function() {
    //use parseFormat function from the now exposed DPGlobal variable
    var newFormat = $.fn.datepicker.DPGlobal.parseFormat($(this).val());

    //update each datepicker internal format
    $('.j-start-date').data('datepicker').format = newFormat;
    $('.j-end-date').data('datepicker').format = newFormat;

    //refresh each datepicker showing date
    if ($('.j-start-date').prop("value") != "") {
        $('.j-start-date').data('datepicker').set();
    }
    if ($('.j-end-date').prop("value") != "") {
        $('.j-end-date').data('datepicker').set();
    }
});

---

Edited your answer to include an updated working Fiddle - Thanks so much, OP.

Answer 2

While I have not personally used the Eyecon Bootstrap Datepicker before, I was able to work up a solution that both handled the change format requirement as well as the disabling of End Date values based on a changed Start Date (issue #2 from your jsFiddle).

Doing so required using a patched version of the Eyecon plug-in though to incorporate this custom function (Credit to @Djomla) and also leveraging the more up-to-date version of the plug-in, which is this fork here.

All that being said, here are some of the key changes to your fiddle, taking advantage of the above updates I describe...

Handling date format change:

$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
    $('.j-start-date, .j-end-date').datepicker('setFormat',dateFormat);
    if($('.j-start-date').val() != '')
        $('.j-start-date').datepicker('update',new Date(checkin.date.valueOf()));
    if($('.j-end-date').val() != '')
        $('.j-end-date').datepicker('update',new Date(checkout.date.valueOf()));
});

This updated change handler does 2 things; first, it leverages the setFormat method added to the plug-in. Second, and only if there is a value already in the datepicker, it uses the update method to simply set the value to the current value (this is to ensure the date the user sees in the UI adopts the updated format).

Updated .on() handler for the Start Date:

.on('changeDate', function(ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var DayAfterCheckin = AddOneDay(ev.date);
        $('.j-end-date').datepicker('update',DayAfterCheckin);
    }
    checkin.hide();
    $('.j-end-date')[0].focus();
});

This update ensures that the End Date, if currently before the Start Date, is instead set to the day after the selected Start Date. If the End Date is already later than the Start Date, it remains unchanged.

Updated .on() handler for the End Date:

.on('show', function(ev) {
    var DayAfterCheckin = AddOneDay(checkin.date.valueOf());
    $('.j-end-date').datepicker('setStartDate',DayAfterCheckin);
});

This update ensures that the user cannot select an End Date that is prior to the Start Date by virtue of resetting the StartDate option.

Updated jsFiddle, forked from yours: http://jsfiddle.net/8fpEV/

An added note, the updated plug-in does support an inline option (your issue #3) however there appears to be an issue with it applying the proper CSS for disabled dates. I left (commented out) the markup to try the inline design; all the logic all described above still works in inline mode, but the CSS for whatever reason is not applied to disabled dates in the End Date calendar. So you while you still cannot select an End Date prior to the Start Date, the UI does not gray out the restricted dates. If you're interested in using the updated plug-in, I'd simply post that as an issue in its GitHub repo for the developer to see & address.

Hope this helps!

Answer 3

You can access the Datepicker object through $('.selector').data('datepicker'), which allows you to change its internal options, like format. In your case, it is just the separator that is changing, so you can do something like this:

HTML with additional data-separator hints:

<select id="custom_date_format">
    <option value="mm/dd/yyyy" data-separator="/">mm/dd/yyyy</option>
    <option value="mm-dd-yyyy" data-separator="-">mm-dd-yyyy</option>
    <option value="mm.dd.yyyy" data-separator="." selected>mm.dd.yyyy</option>
</select>

JQuery to update the datepicker separator on format change:

$('#custom_date_format').change(function() {      
    $('.j-start-date').data('datepicker').format.separator = $(':selected', this).data('separator');
    $('.j-end-date').data('datepicker').format.separator = $(':selected', this).data('separator');
});

See the dynamic format separator datepicker fiddle here.

_{(note that the fiddle still needs a few enhancements to have the best real-time user experience)}