Datepicker

A JavaScript component for choosing date ranges,dates and times. Plugin page.

Usage

To use the plugin,you need to add the following files.

<!-- CSS --><link rel="stylesheet" href="libs/datepicker/daterangepicker.css" type="text/css"><!-- Javascript --><script src="libs/datepicker/daterangepicker.js"></script>

Single Date Picker

<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker({singleDatePicker:true,showDropdowns:true});

Date Range Picker

<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker();

With a Callback

<input type="text" name="daterangepicker" class="form-control">

With time selection

<input type="text" name="datetimes" class="form-control">
$('input[name="datetimes"]').daterangepicker({timePicker:true,startDate:moment().startOf('hour'),endDate:moment().startOf('hour').add(32,'hour'),locale:{format:'M/DD hh:mm A'}});

Input Initially Empty

<input type="text" name="datefilter" class="form-control">
var datefilter = $('input[name="datefilter"]');datefilter.daterangepicker({autoUpdateInput:false,locale:{cancelLabel:'Clear'}});datefilter.on('apply.daterangepicker',function(ev,picker){$(this).val(picker.startDate.format('MM/DD/YYYY')+' - '+picker.endDate.format('MM/DD/YYYY'))});$('input.create-event-datepicker').daterangepicker({singleDatePicker:true,showDropdowns:true,autoUpdateInput:false}).on('apply.daterangepicker',function(ev,picker){$(this).val(picker.startDate.format('MM/DD/YYYY'))});
On this page