Add days to a date from one bootstrap datetimepicker and mirror to another?

Question

I'm using the Bootstrap Date Time Picker (http://www.malot.fr/bootstrap-datetimepicker/) to allow a user to select a date and time in one field and then need to recommend a date 21 days following the initially selected date/time in a 2nd field.

I'm wondering how I would go about 'mirroring' one field to another like this but add X days? There is a feature documented that allows mirroring but I don't see how to use this to add days (http://www.malot.fr/bootstrap-datetimepicker/demo.php - see mirror field demo).

i.e. take the date selected using the datetimepicker for field A and mirror it to field B 'but' add 21 days to the date and use that as the default date for the B field?

Answer 1

Using the code mccannf provided here's what I have now:

var pickerOptsGeneral = {
    format: "dd/mm/yyyy",
    autoclose: true,
    minView: 2,
    maxView: 2
};
$("input.datepicker").datetimepicker(pickerOptsGeneral).on('changeDate', function(ev){

    if ($(this).hasClass('linked')) {

        var startfield = this.name;
        var endfield = startfield.replace("Start", "End");
        var startDate = (new Date(ev.date)) + 21;

        console.log(startDate);

        endfield.val(startDate.toISOString());
        endfield.datetimepicker('update');

    }

});

and my markup:

<input type="text" placeholder="00/00/0000" value="" id="pStartDate1" name="fpStartDate1" maxlength="10" class="datepicker linked">

I tried to create a fiddle of this but failed miserably! :/

When I echo 'StartDate' to the screen it appears as:

Tue Jul 02 2013 10:16:24 GMT+0100 (BST)21

Which I'm guessing may be the cause of the problem, that doesn't seem like a value that could be transposed into a valid date in any way. :?

Answer 2

Try something like this:

var pickerOptsGeneral = {
    format: "dd/mm/yyyy",
    autoclose: true,
    minView: 2,
    maxView: 2
};
$('#firstDate')
  .datetimepicker(pickerOptsGeneral)
  .on('changeDate', function(ev){
     var oldDate = new Date(ev.date);
     var newDate = new Date();
     newDate.setDate(oldDate.getDate() + 21);

     secondDate.val(newDate.getDate()+"/"+(newDate.getMonth()+1)+"/"+newDate.getFullYear());
     secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);

Fiddle here

Answer 3

With a little prodding in the right direction from mccannf I got this working, here's my finished code snippet:

var pickerOptsGeneral = {
    format: "dd/mm/yyyy",
    autoclose: true,
    minView: 2,
    maxView: 2
};
$("input.datepicker").datetimepicker(pickerOptsGeneral).on('changeDate', function(ev){
    if ($(this).hasClass('linked')) {
        // Get field name
        var startField = this.name;
        var endField = startField.replace("Start", "End");
        // Get start date and add 21 days
        endDate = new Date(ev.date);
        endDate.setDate(endDate.getDate() + 21);
        endDateString = ('0' + endDate.getDate()).slice(-2) + '/'
                        + ('0' + (endDate.getMonth()+1)).slice(-2) + '/'
                        + endDate.getFullYear();
        // Set end date
        $('input[name='+endField+']').val(endDateString);
    }
});

Answer 4

onchange getting the firstpicker date and setting to second picker. little change in above answer works good!!!!

$('firstPicker').on('dp.change', function(e){  
            endDate = new Date(e.date);

        endDate.setDate(endDate.getDate() + 280);
       var endDtae=  ('0' + endDate.getDate()).slice(-2) + '/'
       + ('0' + (endDate.getMonth()+1)).slice(-2) + '/'
       + endDate.getFullYear();
         $("secondpicker").val(endDtae)
     })

Answer 5

As of now I would suggest a similar solution that uses Moment.js library for date manipulation. Some advantages of this library:

• very tidy code for date and time operations
• versatile and very efficient date and time conversion and formatting
• good locale operations support
• very popular, often comes bundled with other packages (e.g., Chart.js)
• free distributed (MIT license)

JS code:

    var pickerOptsGeneral = {
        format: "dd/mm/yyyy",
        autoclose: true,
        minView: 2,
        maxView: 2
    };

    $('#firstDate')
      .datetimepicker(pickerOptsGeneral)
      .on('changeDate', function(ev){
         var oldDate = moment(ev.date);
         var newDate = oldDate;
         newDate.add(21, 'days'); // note that moment object is mutating
         secondDate.val(newDate.format("DD/MM/YYYY")); // format is case sensitive
         secondDate.datetimepicker('update');
    });

    var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);

Fiddle