如何将 1 个日期放入 2 个输入字段？

Question

如果用户在提交表单时没有选择最终日期，我想将开始日期作为最终日期列的最终日期。我的代码如下。

<div class="col-md-4">
  <div class="input-group">
    <label class="control-label">{!!Lang::get('site_lang.start_date')!!}</label>
    <input id="startDate" style="width:80%;" name="start_date" autocomplete="off"/>
  </div>
</div>
<div class="col-md-4">
  <div class="input-group">
    <label class="control-label">{!!Lang::get('site_lang.end_date')!!}</label>
    <input id="endDate" style="width:80%;"  name="end_date" autocomplete="off"/>
  </div>   
</div>

脚本

<script>
 $('#startDate').datepicker({
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        format: '{{config('app.date_format_js')}}',
        maxDate: function () {
            return $('#endDate').val();
        }
    });

    $('#endDate').datepicker({
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        format: '{{config('app.date_format_js')}}',
        minDate: function () {
            return $('#startDate').val();
        }
    });
</script>

Answer 1

如何在提交表单之前调用一个函数并检查 endDate 是否为空或未定义。如果是这样，只需将 startDate 设置为 endDate 输入字段。

function beforeSubmit()
{
  if($('#endDate').val()==="" || $('#endDate').val() === undefined)
   {
    $('#endDate').val($('#startDate').val());
   }
}

<form onsubmit="return beforeSubmit()" > 
  <input type="submit" name="Submit" value="Submit"/>
</form>

Answer 2

如果你使用 jquery ui datepicker

您可以通过两种方式设置结束日期

$('#startDate').datepicker();
$('#endDate').datepicker();

// Set End date on click submit button if end date is empty set end date value as start date 
// then submit form

$("#submit").click(function(){
      if(!$("#endDate").val()){
          var startDate = $("#startDate").val()
          $("#endDate").val(startDate)
      }
      $("#form").submit()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="form" action="">
        <input id="startDate"  name="start_date" autocomplete="off"/>
        <input id="endDate"  name="end_date" autocomplete="off"/>
        <button id="submit" type="submit">Send</button>
    </form>