date time range picker bootstrap 4 in javascript

To create a date-time range picker using Bootstrap 4, you can use the Datetimepicker plugin along with the Moment.js library. Here's how you can do it:

First, include the required libraries in your HTML file:


<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- Datetimepicker plugin -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
815 chars
13 lines

Then, create the HTML structure for your date-time range picker:


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label>Start Date Time</label>
        <div class="input-group date" id="start-datetimepicker" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#start-datetimepicker">
          <div class="input-group-append" data-target="#start-datetimepicker" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label>End Date Time</label>
        <div class="input-group date" id="end-datetimepicker" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#end-datetimepicker">
          <div class="input-group-append" data-target="#end-datetimepicker" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1134 chars
27 lines

Finally, initialize the Datetimepicker plugin in your JavaScript code:


index.tsx
$(function () {
  $('#start-datetimepicker').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss',
      stepping: 5
  });
  $('#end-datetimepicker').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss',
      stepping: 5,
      useCurrent: false,
  });
  $("#start-datetimepicker").on("change.datetimepicker", function (e) {
      $('#end-datetimepicker').datetimepicker('minDate', e.date);
  });
  $("#end-datetimepicker").on("change.datetimepicker", function (e) {
      $('#start-datetimepicker').datetimepicker('maxDate', e.date);
  });
});
546 chars
18 lines

This will create a date-time range picker in your HTML page, with the start date-time and end date-time attributes being properly set, as per the user's selection.

similar javascript code snippets

convert chatham time to gmt in javascript

convert gmt to chatham time in javascript

find the current date and time in javascript

convert gmt to new zealand time in javascript

convert a unix timestamp to a date in javascript

convert australian central standard time to gmt in javascript

how to use the differenceinhours function from date-fns in javascript

create an date picker in javascript

convert alaska time to gmt in javascript

convert a date to a unix timestamp in javascript

related categories