Bootstrap-datepicker: Alt Field

Created on 28 Feb 2013 · 6Comments · Source: uxsolutions/bootstrap-datepicker

Hi,

I'm not finding a simple solution, so i'm asking :)
There is a way to populate an alternate field like jquery-UI does ?

http://jqueryui.com/datepicker/#alt-field

In a different format to ?

Thanks

Source

Erwane

Most helpful comment

Another simple solution that uses bootstrap-datepicker's format function. Here I am picking a date range from an inline calendar and populating two input fields with the selection.

      $('#datepicker').datepicker({
          inputs: $('.range-start, .range-end')
      });
      $('.range-start').datepicker().on('changeDate', function(e){
          $('#fromField').val(e.format('mm/dd/yyyy'));
      });
      $('.range-end').datepicker().on('changeDate', function(e){
          $('#toField').val(e.format('mm/dd/yyyy'));
      });

pdimilla on 31 Jan 2014

👍3

All 6 comments

I suggest you to use my fork :
http://www.malot.fr/bootstrap-datetimepicker/demo.php?utm_source=siteweb&utm_medium=demo&utm_campaign=Site%2BWeb

smalot on 28 Feb 2013

thanks

Erwane on 28 Feb 2013

If you want a simple solution that I just came up with, add this to the end of the .setValue function:

railsDate = this.getFormattedDate(DPGlobal.parseFormat('yyyy-mm-dd');
$(this).next('.alt-field').val(railsDate);

Then just put an .alt-field input after your dates.

gregblass on 12 Jan 2014

Another simple solution that uses bootstrap-datepicker's format function. Here I am picking a date range from an inline calendar and populating two input fields with the selection.

      $('#datepicker').datepicker({
          inputs: $('.range-start, .range-end')
      });
      $('.range-start').datepicker().on('changeDate', function(e){
          $('#fromField').val(e.format('mm/dd/yyyy'));
      });
      $('.range-end').datepicker().on('changeDate', function(e){
          $('#toField').val(e.format('mm/dd/yyyy'));
      });

pdimilla on 31 Jan 2014

👍3

These work-arounds didn't work for me with multidates. I had to do something like this:

  dp = $('[data-behaviour~=datepicker]').datepicker( {
    multidate: true,
    multidateSeparator: ', '
  })
  dp.data('datepicker').setDates($('input#datestring').val().split(','));
  dp.on('changeDate', function (e){
    $('input#datestring').val($(this).data('datepicker').getFormattedDate());
  });