Logo

Bootstrap Date Range Picker Examples


      <div class="card card-custom">
       <div class="card-header">
        <h3 class="card-title">
         Bootstrap Date Range Picker Examples
        </h3>
       </div>
       <!--begin::Form-->
       <form class="form">
        <div class="card-body">
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Minimum Setup</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <input type='text' class="form-control" id="kt_daterangepicker_1" readonly placeholder="Select time" type="text"/>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Input Group Setup</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_2'>
            <input type='text' class="form-control" readonly  placeholder="Select date range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
           </div>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Icon Input</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class="input-group" id='kt_daterangepicker_3'>
            <div class="input-group-prepend">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
            <input type="text" class="form-control " placeholder="Email">
           </div>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Date & Time Picker</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_4'>
            <input type='text' class="form-control" readonly  placeholder="Select date & time range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
           </div>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Date Picker</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_5'>
            <input type='text' class="form-control" readonly  placeholder="Select date range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
           </div>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Predefined Ranges</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_6'>
            <input type='text' class="form-control" readonly  placeholder="Select date range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
           </div>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <a href="" class="btn btn-light-primary font-weight-bold" data-toggle="modal" data-target="#kt_daterangepicker_modal">Launch modal Date Range Pickers</a>
          </div>
         </div>
        </div>
        <div class="card-footer">
         <div class="row">
          <div class="col-lg-9 ml-lg-auto">
           <button type="submit" class="btn btn-primary mr-2">Submit</button>
           <button type="submit" class="btn btn-secondary">Cancel</button>
          </div>
         </div>
        </div>
       </form>
       <!--end::Form-->
      </div>
      

      // Class definition

      var KTBootstrapDaterangepicker = function () {

       // Private functions
       var demos = function () {
        // minimum setup
        $('#kt_daterangepicker_1, #kt_daterangepicker_1_modal').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        });

        // input group and left alignment setup
        $('#kt_daterangepicker_2').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });

        $('#kt_daterangepicker_2_modal').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });

        // left alignment setup
        $('#kt_daterangepicker_3').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });

        $('#kt_daterangepicker_3_modal').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });


        // date & time
        $('#kt_daterangepicker_4').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary',

         timePicker: true,
         timePickerIncrement: 30,
         locale: {
          format: 'MM/DD/YYYY h:mm A'
         }
        }, function(start, end, label) {
         $('#kt_daterangepicker_4 .form-control').val( start.format('MM/DD/YYYY h:mm A') + ' / ' + end.format('MM/DD/YYYY h:mm A'));
        });

        // date picker
        $('#kt_daterangepicker_5').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary',

         singleDatePicker: true,
         showDropdowns: true,
         locale: {
          format: 'MM/DD/YYYY'
         }
        }, function(start, end, label) {
         $('#kt_daterangepicker_5 .form-control').val( start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
        });

        // predefined ranges
        var start = moment().subtract(29, 'days');
        var end = moment();

        $('#kt_daterangepicker_6').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary',

         startDate: start,
         endDate: end,
         ranges: {
         'Today': [moment(), moment()],
         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
         'This Month': [moment().startOf('month'), moment().endOf('month')],
         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
         }
        }, function(start, end, label) {
         $('#kt_daterangepicker_6 .form-control').val( start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
        });
       }

       return {
        // public functions
        init: function() {
         demos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTBootstrapDaterangepicker.init();
      });
      

Validation State Examples


      <div class="card card-custom">
       <div class="card-header">
        <div class="card-title">
         <h3 class="card-title">
          Validation State Examples
         </h3>
        </div>
       </div>
       <!--begin::Form-->
       <form class="form">
        <div class="card-body">
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_1_validate'>
            <input type='text' class="form-control is-valid" readonly  placeholder="Select date range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
            <div class="valid-feedback">Success! You've done it.</div>
           </div>
           <span class="form-text text-muted">Example help text that remains unchanged.</span>
          </div>
         </div>
         <div class="form-group row">
          <label class="col-form-label text-right col-lg-3 col-sm-12">Danger State</label>
          <div class="col-lg-4 col-md-9 col-sm-12">
           <div class='input-group' id='kt_daterangepicker_2_validate'>
            <input type='text' class="form-control is-invalid" readonly  placeholder="Select date range"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
            </div>
            <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
           </div>
           <span class="form-text text-muted">Example help text that remains unchanged.</span>
          </div>
         </div>
        </div>
        <div class="card-footer">
         <div class="row">
          <div class="col-lg-9 ml-lg-auto">
           <button type="submit" class="btn btn-primary mr-2">Submit</button>
           <button type="submit" class="btn btn-secondary">Cancel</button>
          </div>
         </div>
        </div>
       </form>
       <!--end::Form-->
      </div>
      

      // Class definition

      var KTBootstrapDaterangepicker = function () {

       // Private functions
       var validationDemos = function() {
        // input group and left alignment setup
        $('#kt_daterangepicker_1_validate').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_1_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });

        // input group and left alignment setup
        $('#kt_daterangepicker_2_validate').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_3_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });

        // input group and left alignment setup
        $('#kt_daterangepicker_3_validate').daterangepicker({
         buttonClasses: ' btn',
         applyClass: 'btn-primary',
         cancelClass: 'btn-secondary'
        }, function(start, end, label) {
         $('#kt_daterangepicker_3_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        });
       }

       return {
        // public functions
        init: function() {
         validationDemos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTBootstrapDaterangepicker.init();
      });
      
Success! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo