我不想用今天的日期预先填充我的日期范围选择器文本框答案

【问题标题】：I Don't want To Pre-populate my Date range picker text box with today's date我不想用今天的日期预先填充我的日期范围选择器文本框
【发布时间】：2020-12-26 22:37:49
【问题描述】：

我使用了 Bootstrap 的日期范围选择器。目前是什么发生在我的页面自动加载日期范围选择器时预填充今天的日期。我只是想删除它。

我想要的是当页面加载时它只显示两个带有占位符的文本框。

$(function() {
  $('#BeginDate').daterangepicker({
    singleDatePicker: true,
    autoApply: true,
    minDate: moment(),
    startDate: moment(),
    locale: {
      format: 'MM/DD/YYYY',
      firstDay: 1
    }
  });

  $('#CompletionDate').daterangepicker({
    singleDatePicker: true,
    autoApply: true,
    minDate: moment(),
    startDate: moment().add(7, 'days'),
    locale: {
      format: 'MM/DD/YYYY',
      firstDay: 1
    }
  });

  $('#BeginDate').on('apply.daterangepicker', function(ev, picker) {

    var new_start = picker.startDate.clone().add(7, 'days');

    $('#CompletionDate').daterangepicker({
      singleDatePicker: true,
      autoApply: true,
      minDate: picker.startDate.clone(),
      startDate: new_start,
      locale: {
        format: 'MM/DD/YYYY',
        firstDay: 1
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group">
  <label for="startDate*">Start Date*</label>
  <input type="text" id="BeginDate" class="form-control" placeholder="Select Course Start Date" required />
  <div class="invalid-feedback">
    Please select date.
  </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-xl-4">
  <div class="form-group">
    <label for="endDate*">End Date*</label>
    <input type="text" id="CompletionDate" class="form-control" placeholder="Select Course End Date" required />
    <div class="invalid-feedback">
      Please select date.
    </div>
  </div>
</div>

【问题讨论】：

标签： twitter-bootstrap asp.net-core bootstrap-4 bootstrap-daterangepicker

【解决方案1】：

我知道这不是优雅的解决方案，但它会起作用。为两个输入初始化 datepicker 后，您需要将两个输入的值设置为空，以便 datepicker 将显示占位符。

$('#BeginDate').val('')
$('#CompletionDate').val('')

【讨论】：