Bootstrap DatePicker Splitting Date

Question

I'm in the process of updating an old booking systems views and I am presently stuck on a solution for updating the calendar widget. As the site is responsive I have opted for the bootstrap datepicker supplied by eternicode https://github.com/eternicode/bootstrap-datepicker.

OK here the issue. I have an old Datepicker that splits the checkin & checkout dates into 3 parts and then formats the date for PHP (n = Month no leading zero)) (j = Day no leading zero) & (Y = Year 4 digit numeric).

// Initiate Params
   $checkInDate = mktime(0,0,0,date("n"),date("j") + 1,date("Y"));
   $checkOutDate = mktime(0,0,0,date("n"),date("j") + 3,date("Y"));   
//CheckInDate
   if (!isset($daysI)){
      $daysI = date("j",$checkInDate);
   }
   if (!isset($monthsI)){
      $monthsI = date("n",$checkInDate);
   }
   if (!isset($yearI)){
      $yearI = date("Y",$checkInDate);
   }
//CheckOutDate
   if (!isset($daysS)){
      $daysS = date("j",$checkOutDate);
   }
   if (!isset($monthsS)){
      $monthsS = date("n",$checkOutDate);
   }
   if (!isset($yearS)){
      $yearS = date("Y",$checkOutDate);
   }

The input boxes markup is as below.

<input type='text' id='fulldate' name='fulldate'>
<label>Enter Day of Arrival (in the format DD) </label>
<input type="text" name="daysI" id="daysI" size="6" maxlength="6" /> 
<label>Enter Month of Arrival (in the format MM) </label>
<input type="text" name="monthsI" id="monthsI" size="6" maxlength="6" /> 
<label>Enter Year of Arrival (in the format YYYY) </label>
<input type="text" name="yearI" id="yearI" size="6" maxlength="6" />

Here's where I'm having the problem. The following function works with jQuery UI:

$('#fulldate').datepicker({
    showAnim: 'fadeIn',
    dateFormat: 'd/m/yy',
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#daysI').val(pieces[0]);
        $('#daysI').val(pieces[1]);
        $('#daysI').val(pieces[2]);
    }
});

However I cannot get a similar solution to work with the bootstrap-datepicker which I am using as a replacement for jQuery UI ie:

$('#fulldate').datepicker({
    format: "d/m/yyyy",
    todayBtn: "linked",
    todayHighlight: true
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#daysI').val(pieces[0]);
        $('#monthsI').val(pieces[1]);
        $('#yearI').val(pieces[2]);
    }
});

Thank in advance for any solution..

henryallsuch henryallsuch · Accepted Answer · 2014-05-24T14:58:00

The documentation gives an example of how to capture the date changed event: bootstrap-datepicker Docs - Change Date Event

Something like this should be in the right direction (untested):

$('#fulldate').datepicker()
.on('changeDate', function(ev){

  var newDate = new Date(ev.date);

   $('#daysI').val(newDate.getDate());
   $('#monthsI').val(newDate.getMonth());
   $('#yearI').val(newDate.getFullYear());

});

Bootstrap DatePicker Splitting Date

1 Answers