0

How to highlight specific dates in Tempus Dominus 4? For example I want to highlight 15, 18 ..etc. And it would be possible to disabled dates that isn't highlighted? I can't find any solution for this specific version of datetimepicker.

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

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
</head>

<body>

  <div class="row">
    <div class="col-sm-6">
      <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>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>
</body>

</html>
Sharmae Reyes
  • 105
  • 6

0 Answers0