Search code examples
jquerydatetimepickertempus-dominus-datetimepicker

How to reset or clear the bootstrap datetimepicker?

How to reset or clear the datetimepicker? I can't find solution for this bootstrap datetimepicker version. I don't want to use the default clear. As you can see there's a highlighted day, using a reset it should clear the highlighted day and display the plain datetimepicker.

$('.select2').select2({

});

$('#apptDay').datetimepicker({
  format: 'L'
});

$("#apptDay").on("show.datetimepicker update.datetimepicker", function(e) {
  highlight()
});

function highlight() {
  var dateToHilight = ["11/21/2022", "11/25/2022", "12/30/2022"];
  var array = $("#apptDay").find(".day").toArray();

  for (var i = 0; i < array.length; i++) {
    var date = array[i].getAttribute("data-day");

    if (dateToHilight.indexOf(date) > -1) {
      array[i].style.color = "orange";
      array[i].style.fontWeight = "bold";
    }
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js'></script>

<div class="row">
  <div class="form-group">
    <label for="">Select Doctor</label>
    <span class="text-danger">*</span>
    <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
      <option selected="selected">Alabama</option>
      <option>Alaska</option>
      <option>California</option>
      <option>Delaware</option>
      <option>Tennessee</option>
      <option>Texas</option>
      <option>Washington</option>
    </select>
  </div>
  <div class="col-sm-6 mt-4">
    <div class="input-group date" id="apptDay" data-target-input="nearest">
      <input name="day" type="text" class="form-control datetimepicker-input" data-target="#apptDay" placeholder="mm/dd/yyyy" value="" />

      <div class="input-group-append" data-target="#apptDay" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
  </div>
</div>

Solution

  • It's easy to remove the styles if you set a class (instead of modifying the style property):

    if (dateToHilight.indexOf(date) > -1) {
  array[i].classList.add('highlighted');
}

    and define the styles with CS:

    .highlighted {
  color: orange;
  font-weight: bold;  
}

    Then you could simply remove that class in any case, you want:

    $('.highlighted').removeClass('highlighted');

    To highlight different dates depending on the value of a select element, you could define a global var (maybe country) and save the value of the select in this var:

    var country = 'Alabama';

$(".select2").on("change", function() {
  country = $(this).val();
});

    Then you only need to define your dates, that you want to highlight in a multi dimension array or object with the values of the select element as keys:

    var dateToHilight = {
    'Alabama': ["11/21/2022", "11/25/2022"],
    'Alaska': ["11/23/2022", "11/29/2022"],
    'California': ["11/17/2022", "11/18/2022"],
    'Delaware': ["11/19/2022", "11/26/2022"],
    'Tennessee': ["11/20/2022", "11/30/2022"],
    'Texas': ["11/15/2022", "11/24/2022"],
    'Washington': ["11/14/2022", "11/27/2022"],
};

    and modify the highlighting if to select the second dimension with that key:

    if (dateToHilight[country].indexOf(date) > -1) {
  array[i].classList.add('highlighted');
}

    Working example: (for demonstration with a keyup event)

    var country = 'Alabama';

$('.select2').select2({});

$('#apptDay').datetimepicker({
  format: 'L'
});

$("#apptDay").on("show.datetimepicker update.datetimepicker", function() {
  highlight();
});

$(".select2").on("change", function() {
  country = $(this).val();
});

function highlight() {
  var dateToHilight = {
    'Alabama': ["11/21/2022", "11/25/2022"],
    'Alaska': ["11/23/2022", "11/29/2022"],
    'California': ["11/17/2022", "11/18/2022"],
    'Delaware': ["11/19/2022", "11/26/2022"],
    'Tennessee': ["11/20/2022", "11/30/2022"],
    'Texas': ["11/15/2022", "11/24/2022"],
    'Washington': ["11/14/2022", "11/27/2022"],
  };
  var array = $("#apptDay").find(".day").toArray();

  for (var i = 0; i < array.length; i++) {
    var date = array[i].getAttribute("data-day");

    if (dateToHilight[country].indexOf(date) > -1) {
      array[i].classList.add('highlighted');
    }
  }
}
    .highlighted {
  color: orange;
  font-weight: bold;  
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js'></script>

<div class="row">
  <div class="form-group">
    <label for="">Select Doctor</label>
    <span class="text-danger">*</span>
    
    <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
      <option selected="selected">Alabama</option>
      <option>Alaska</option>
      <option>California</option>
      <option>Delaware</option>
      <option>Tennessee</option>
      <option>Texas</option>
      <option>Washington</option>
    </select>
  </div>
  
  <div class="col-sm-6 mt-4">
    <div class="input-group date" id="apptDay" data-target-input="nearest">
      <input name="day" type="text" class="form-control datetimepicker-input" data-target="#apptDay" placeholder="mm/dd/yyyy" value="" />

      <div class="input-group-append" data-target="#apptDay" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
  </div>
</div>