I Don't want To Pre-populate my Date range picker text box with today's date

Question

I have used the date range picker of Bootstrap. What currently happening is whenever my page loads Date Range picker automatically pre-populates with today's date. I just want to remove this.

What I Want is When page Loads it only shows two Text boxes with a placeholder .

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

Answer 1

I know this is not elegant solution but it will work. after initializing datepicker for both input you need to set the value of both input to empty so that datepicker will show the placeholder then.

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