Question

基于datetimepicker中的select我想设置三个日期。首先是选定日期 + 28天，第二个选定日期 + 56天和第三个选定日期 + 84天。如果用户设置了新日期，则脚本必须执行新计算并在字段中设置此新日期： datummeritve2，datummeritve3，datummeritve5 。

我见过一些类似的问题，但大多数情况下它并没有使用 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=""/>

JS

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

Answer 1

对于我的回答，你还必须包括moment.js。您还必须为输入字段＃datummeritve2，＃datummeritve3和＃datummeritve4设置“禁用”。注意：用户仍然可以轻松更改它们。您还必须检查dateDifference服务器端

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

  });

Jsfiddle：https://jsfiddle.net/rwj2Lmh2/1/

Answer 2

我设法让它发挥作用（至少我认为我做了;））..

现在是我的代码。也许它可以帮助别人..

<强> JS

$('#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

    <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）。文本字段（只读）用生成的日期填充。

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

2 个答案: