Question

这是示例代码

  <input id="date1" name="start_date" id="dpd1"/>
   <select class="form_line_only form-control" name="ho_night">
                        <option selected> 0 </option>
                        <option > 1 </option>
                        <option > 2 </option>
                        <option > 3 </option>
                        <option > 4 </option>
                        <option > 5 </option>
                        <option > 6 </option>
                        <option > 7 </option>
                        <option > 8 </option>
                        <option > 9 </option>
                        <option > 10 </option>
                      </select>
    <input id="date2" name="end_date" id="dpd2"/>

我想根据选择的夜晚设置结束日期的日期，能否帮到我。我使用日期选择器。并且用户也无法更改结束日期的日期。这只是基于夜间选择的工作。请提前致谢

 <script src="<?php echo BASE_URL;?>js/jquery-1.10.2.js" ></script>



    <script src="<?php echo BASE_URL;?>js/jquery.min.js" ></script>
    <script src="<?php echo BASE_URL;?>js/bootstrap.min.js"></script>
      <script src="<?php echo BASE_URL;?>ckeditor/ckeditor.js" ></script>

   <script src="<?php echo BASE_URL;?>js/bootstrap-datepicker.js" ></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/bootstrap-datepicker.js" ></script> 

<script>

jQuery('.datepicker').datepicker()

$( "#dpd1" ).datepicker({ dateFormat: 'dd/mm/yy' });

var nowTemp = new Date();

var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);



var checkin = $('#dpd1').datepicker({

  onRender: function(date) {

    return date.valueOf() < now.valueOf() ? 'disabled' : '';

  }

}).on('changeDate', function(ev) {

  if (ev.date.valueOf() > checkout.date.valueOf()) {

    var newDate = new Date(ev.date)

    newDate.setDate(newDate.getDate() + 1);

    checkout.setValue(newDate);

  }

  checkin.hide();

  $('#dpd2')[0].focus();

}).data('datepicker');

var checkout = $('#dpd2').datepicker({

  onRender: function(date) {

    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';

  }

}).on('changeDate', function(ev) {

  checkout.hide();

}).data('datepicker');

</script>

Answer 1

您可以使用readonly属性作为结束日期，以便用户无法编辑该字段。

其次，要计算结束日期，执行开始日期和之夜的日期计算，您可以将该值放在结束日期字段中。

Here您可以找到各种方法来添加日期。

如何增加关闭日期取决于选择下拉日期选择器

1 个答案: