Datepicker

The Datepicker is a user-friendly interface component that allows users to select dates from a visual calendar popup, enhancing both usability and data accuracy. It supports various configurations, including date formats, range selection, and localization, making it a flexible solution for forms, scheduling tools, and other date-related inputs. Seamlessly integrating with modern UI frameworks, the Datepicker improves user experience by simplifying date entry and minimizing manual input errors.

Usage

To use Datepicker on your page, you must include the required vendor CSS files within the "Vendors CSS" section of the page header.

              
<link rel="stylesheet" href="@@webRoot/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

Include the following vendor scripts in the "Vendors JS" section of the page footer to enable Datepicker functionality.

              
<script src="@@webRoot/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

Example

Default Datepicker

just add class .mydatepicker to create it.

                    
<div class="input-group">
  <input type="text" class="form-control mydatepicker" placeholder="dd/mm/yyyy" />
  <span class="input-group-text">
    <i class="ti ti-calendar fs-5"></i>
  </span>
</div>
Default Datepicker :
                    
$('.mydatepicker').datepicker({
  format: "dd-mm-yyyy" // Example: 14-04-2025
});
To change the datepicker :
                    
$('.mydatepicker').datepicker({
  format: "mm-dd-yyyy" // Change To Here
});

Autoclose Datepicker

just add class .complex-colorpicker to create it.

                    
<div class="input-group">
  <input type="text" class="form-control" id="datepicker-autoclose" placeholder="mm/dd/yyyy" />
  <span class="input-group-text">
    <i class="ti ti-calendar fs-5"></i>
  </span>
</div>
                    
                  
                    
jQuery("#datepicker-autoclose").datepicker({
  autoclose: true,
  todayHighlight: true,
});

Default Datepicker click on icon

just add class .date to create it.

                    
<div class="input-group date">
  <input type="text" class="form-control" />
  <span class="input-group-addon input-group-text">
    <i class="ti ti-calendar fs-5"></i>
  </span>
</div>
                    
                  
                    
$('.input-group.date').datepicker({
  format: "dd-mm-yyyy" // Example: 14-04-2025
});

Date Range picker

just add id #date-range to create it.

TO 
                    
<div class="input-daterange input-group" id="date-range">
  <input type="text" class="form-control" name="start" />
  <span class="input-group-text bg-primary b-0 text-white">TO</span>
  <input type="text" class="form-control" name="end" />
</div>
                    
                  
                    
jQuery("#date-range").datepicker({
  toggleActive: true,
});