Javascript 基于日期时间选择计算新日期

基于datetimepicker中的选择，我想设置三个日期。第一个选择日期+28天，第二个选择日期+56天，第三个选择日期+84天。如果用户设置了新日期，则脚本必须执行新计算，并在以下字段中设置新日期：DatumErtive2、DatumErtive3、DatumErtive5

我看到过一些类似的问题，但大多数情况下都没有使用datetimepicker，而且有写的答案，我无法让它工作

简言之。。当用户选择日期时，其他字段必须填写新的计算日期

这是我的密码

HTML

<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class='input-group date' id=''>
        <p><span class="napis">Pick a date</span></p>
        <input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve"  value=""/>
    </div>
</div>


<input style="width: 280px;" type='text' class="form-control" id="datummeritve2" name="datummeritve2" placeholder="Datum meritve"  value=""/>

<input style="width: 280px;" type='text' class="form-control" id="datummeritve3" name="datummeritve3" placeholder="Datum meritve"  value=""/>

<input style="width: 280px;" type='text' class="form-control" id="datummeritve4" name="datummeritve4" placeholder="Datum meritve"  value=""/>

    <input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve"  value=""/>

    <input readonly style="width: 280px;" name="datummeritve2" type="text" id="datummeritve2" class="form-control" placeholder="" value="">
    <input readonly style="width: 280px;" name="datummeritve3" type="text" id="datummeritve3" class="form-control" placeholder="" value="">
    <input readonly style="width: 280px;" name="datummeritve4" type="text" id="datummeritve4" class="form-control" placeholder="" value="">

---

对于我的回答，您还必须包括moment.js。您还必须为输入字段#datumertive2、#datumertive3和#datumertive4设置“禁用”。注意：用户仍然可以轻松地更改它们。您还必须检查服务器端的日期差异

  // Init the non clickable 
  $('#datummeritve2, #datummeritve3, #datummeritve4').datetimepicker({
      defaultDate: new Date(),
      locale:moment.locale('de-at'),
      format: 'DD.MM.YYYY',
      ignoreReadonly:false 
  });

  // Init the main clickable
  $('#datummeritve1').datetimepicker({
    defaultDate: new Date(),
    locale:moment.locale('de-at'),
    format: 'DD.MM.YYYY',
    ignoreReadonly:false 
  }).on("dp.change",function(e){

    // Fetch the current date
    var date28 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
    var date56 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
    var date84 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());    

    // Add the days to the dates
    date28.setDate(date28.getDate()+28);
    date56.setDate(date56.getDate()+56);
    date84.setDate(date84.getDate()+84);

    // set it 
    $("#datummeritve2").data("DateTimePicker").date(date28);
    $("#datummeritve3").data("DateTimePicker").date(date56);
    $("#datummeritve4").data("DateTimePicker").date(date84);

  });

---

jshiddle:

我已经设法让它工作了（至少我认为我做到了；）

这是我的代码。也许它能帮助某人

JS

$('#datummeritve1').datetimepicker({
    onShow: function(ct){
        this.setOptions({
            minDate: new Date()
        });
    },
    format: 'DD.MM.YYYY',
    formatDate: 'DD.MM.YYYY',
    datepicker: true,
    timepicker: false   
});

$('#datummeritve1').datetimepicker({
    onShow: function(ct){
        this.setOptions({
            minDate: new Date()
            });
        },
        format: 'DD.MM.YYYY',
        formatDate: 'DD.MM.YYYY',
        datepicker: true,
        timepicker: false   
});

$("#datummeritve1").change(function(){

    var newEnd = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY").toDate());
    newEnd.setDate(newEnd.getDate()+28);            
    $("#datummeritve2").val(moment(newEnd).format('DD.MM.YYYY'));

    newEnd.setDate(newEnd.getDate()+28);
    $("#datummeritve3").val(moment(newEnd).format('DD.MM.YYYY'));

    newEnd.setDate(newEnd.getDate()+28);
    $("#datummeritve4").val(moment(newEnd).format('DD.MM.YYYY'));
});

HTML

<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class='input-group date' id=''>
        <p><span class="napis">Pick a date</span></p>
        <input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve"  value=""/>
    </div>
</div>


<input style="width: 280px;" type='text' class="form-control" id="datummeritve2" name="datummeritve2" placeholder="Datum meritve"  value=""/>

<input style="width: 280px;" type='text' class="form-control" id="datummeritve3" name="datummeritve3" placeholder="Datum meritve"  value=""/>

<input style="width: 280px;" type='text' class="form-control" id="datummeritve4" name="datummeritve4" placeholder="Datum meritve"  value=""/>

    <input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve"  value=""/>

    <input readonly style="width: 280px;" name="datummeritve2" type="text" id="datummeritve2" class="form-control" placeholder="" value="">
    <input readonly style="width: 280px;" name="datummeritve3" type="text" id="datummeritve3" class="form-control" placeholder="" value="">
    <input readonly style="width: 280px;" name="datummeritve4" type="text" id="datummeritve4" class="form-control" placeholder="" value="">

---

摘要：基于日期的选择（日期时间选择器）。文本字段（只读）由生成的日期填充。

首先，您需要处理datetimepicker的

onselected

事件，从中获取所选日期，然后使用该日期添加所需的天数，并将

输入值设置为这些日期。[示例
onselected
事件处理]（）onchange也必须考虑在内。。我知道大概需要什么，我对语法有问题，因为我不太熟悉jQuery javascript代码..google:）你应该看看itTnx的回复。我试过这个代码，但什么也没发生。我还使用了DL和inlude moment.js文件（）——我认为这是正确的。。我错过了什么？！还有一件事。。新日期可以放在文本字段中。。用户不应更改该值。。我只是想看看。以后。。此表单将被提交，数据将保存在数据库（mysql）中。我已将警报放在函数$（“#datumeritev1”）中。在（“dp.change”，函数（e）上，{..什么都没有..我已将其更改为：$（“#datumeritev1”）。更改（函数（）{var newEnd=newdate（矩（$（“#datumeritev1”）.val（），“DD.MM.yyyyy HH:MM”）.toDate（））；newEnd.setHours（newEnd.getDate（）+28）；$（“#datumeritev2”）.val（newEnd）；}）；现在我输入了“2017年2月11日星期六14:00:00 GMT+0100”，这是不正确的。。