Jquery 从一个引导datetimepicker向一个日期添加天数，并镜像到另一个？

我使用Bootstrap日期时间选择器（）允许用户在一个字段中选择日期和时间，然后需要在第二个字段中的初始选择日期/时间后21天推荐日期

我想知道我将如何像这样将一个字段“镜像”到另一个字段，但增加X天？有一个功能允许镜像，但我不知道如何使用它来增加天数（-请参阅镜像字段演示）

---

i、 e.使用datetimepicker为字段A选择日期，并将其镜像到字段B，但“在日期上添加21天，并将其用作B字段的默认日期”

尝试以下操作：

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);

---

试试这样的方法：

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);

---

使用mccannf提供的代码，我现在得到的是：

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');

    }

});

和我的标记：

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

我试图编造一把小提琴，但不幸失败了/

当我向屏幕回显“StartDate”时，它显示为：

2013年7月2日星期二10:16:24 GMT+0100（英国夏令时）21

---

我猜这可能是问题的原因，这似乎不是一个可以以任何方式转换为有效日期的值

使用mccannf提供的代码，我现在得到的是：

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');

    }

});

和我的标记：

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

我试图编造一把小提琴，但不幸失败了/

当我向屏幕回显“StartDate”时，它显示为：

2013年7月2日星期二10:16:24 GMT+0100（英国夏令时）21

---

我猜这可能是问题的原因，这似乎不是一个可以以任何方式转换为有效日期的值

通过mccannf在正确方向上的一点推动，我完成了这项工作，下面是我完成的代码片段：

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);
    }
});

---

mccannf朝着正确的方向做了一点小小的推动，我就完成了这项工作，下面是我完成的代码片段：

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);
    }
});

---

一旦更改获取第一个选择器日期并设置为第二个选择器。 以上答案中的小改动效果很好

$('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)
     })

---

一旦更改获取第一个选择器日期并设置为第二个选择器。 以上答案中的小改动效果很好

$('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)
     })

---

到目前为止，我建议使用库进行日期操作的类似解决方案。 此库的一些优点：

• 非常整洁的日期和时间操作代码
• 通用且非常高效的日期和时间转换和格式设置
• 良好的语言环境操作支持
• 非常流行，通常与其他软件包（如Chart.js）捆绑在一起
• 免费分发（MIT许可证）

JS代码：

    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);

---

现在，我建议使用库进行日期操作的类似解决方案。 此库的一些优点：

• 非常整洁的日期和时间操作代码
• 通用且非常高效的日期和时间转换和格式设置
• 良好的语言环境操作支持
• 非常流行，通常与其他软件包（如Chart.js）捆绑在一起
• 免费分发（MIT许可证）

JS代码：

    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);

---

谢谢，我试过了，但当浏览器试图转换为ISO字符串时，我遇到了一个JS错误。已更新-不知道您正在应用于输入字段的格式。此编辑的答案不使用ISO字符串…谢谢，我尝试了此操作，但在浏览器尝试转换为ISO字符串时出现JS错误。已更新-不知道应用于输入字段的格式。此编辑的答案不使用ISO字符串。。。