Datepickers

Atmos comes with host date input options which can be useful for various scenarios, we have included some of the most popular datepicker plugins that are available and are free to use

Bootstrap Datepicker

Bootstrap datepicker is most simple and easy to implement datepicker, it by default supports bootstrap.

step 1

Include the stylesheet datepicker3.css inside the if it's not there already. add this before atmos stylesheet

<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">

Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

Step 3

Add the Markup

 <input type="text" class="js-datepicker form-control" placeholder="Select a Date">

Step 4

Initialize the plugin

$(".js-datepicker").datepicker();

Datepicker for Bootstrap

Daterangepicker

Daterangepicker is used for selecting date ranges. To use daterangepicker take a look at following steps

Step 1

Include the stylesheet daterangepicker.css inside the if it's not there already. add this before atmos stylesheet

<link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">

Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

<script src="assets/vendor/moment/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>

Step 3

Add Following Markup

<input type="text" class="input-daterange form-control">

Step 4

Initialize the plugin

 $('.input-daterange').daterangepicker();

GitHub - dangrossman/daterangepicker: JavaScript Date Range, Date and Time Picker ComponentGitHub

Timepicker

Bootstrap timepicker for selecting times convenently. we have customised bootstrap timepicker for atmos admin panel. you can check its core at timepicker.scss

Step 1

Include the stylesheet bootstrap-timepicker.min.css inside the if it's not there already. add this before atmos stylesheet

<link rel="stylesheet" href="assets/vendor/timepicker/bootstrap-timepicker.min.css">

Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

<script src="assets/vendor/timepicker/bootstrap-timepicker.min.js"></script>

Step 3

Add Markup

<input class="form-control timepicker" type="text">

Step 4

initialize the plugin

 $('.timepicker').timepicker({
        showInputs: false
    });

Timepicker for Twitter Bootstrap

Datedropper

datedropper is a fancy datepicker plugin build on top jqueryui datepicker, it has really playful UI for pickup dates.

Step 1

Include the stylesheet datedropper.min.css inside the if it's not there already. add this before Atmos stylesheet

<link rel="stylesheet" href="assets/vendor/datedropper/datedropper.min.css">

Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

<script src="assets/vendor/datedropper/datedropper.min.js"></script>

Step 3

Add the Markup

<input class="form-control datedropper" type="text">

Step 4

Initialize the plugin

$('.datedropper').dateDropper();

datedropper Javascriptfelixg.io by Felice Gattuso