MyCodeStock

Hiiii, Being a developer ,many times it happen that you need a date picker on your website mainly on forms. jQuery has provide a very simple date picker to apply on input fields but that date picker is not so attractive CSS wise and it selects only a single  date. What if you want to select both "from date" and "to date", "from date" and "to date" with time or you want to select dates like : yesterday date, last seven days, last month.For the selection of these different types of date, Bootstrap has introduced a daterange picker to provide all the above discussed functionality and one more good thing about this daterangepicker is that it looks attractive due to bootstrap CSS.
So, in this post ,I will be giving a one by one demo of three different types of date range pickers with one picking just "from date" and "to date", second one will also choose the time and third one will select dates like last month, last week, yesterday,etc.

To run the tutorials given below , download the complete set of Javascript and css from here.

Fistly, include all the Javascript and CSS files in this package from the link above and some extra files needed for this tutorial in your code as shown below :

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />      // Provided in the package
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script type="text/javascript" src="moment.js"></script>      // Provided in the package
 <script type="text/javascript" src="daterangepicker.js"></script>      // Provided in the package 

Date Range Pickers:

1. Simple Date Range Picker:

This is just a date picker which gives you a functionality of just adding "to date" and "from date". This is very easy to implement and it is just applied by giving id attribute to an input field and then applying a daterangepicker on that particular id. Code and screen shot as given below : 

<form class="form-horizontal">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="selectdaterange">Select Date Range:</label>
      <div class="controls">
        <div class="input-prepend">
          <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="selectdaterange" id="selectdaterange" />
        </div>
      </div>
    </div>
  </fieldset>
</form>
 
<script type="text/javascript">
$(document).ready(function() {
    $('#selectdaterange').daterangepicker();
});
</script>

2. Date Range Picker with Time :

This is a date range picker which gives you an additional functionality of adding a Time  with that provided by the simple Date Range Picker. This is also easy to implement and is implemented in the same way as the Date Range Picker shown above by applying it on form input field. Code and screen shot as given below : 

<form class="form-horizontal">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="dateandtime">Reservation dates:</label>
      <div class="controls">
        <div class="input-prepend">
          <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="dateandtime" id="dateandtime"/>
        </div>
      </div>
    </div>
  </fieldset>
</form>
 
<script type="text/javascript">
$(document).ready(function() {
  $('#dateandtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
});
</script>

3. Date Range Picker With Custom Dates :

This is a date range picker which gives you a functionality of choosing different types of date range like last month , last week, yesterday etc. It is somewhat easy and may be difficult for those who are unaware of jQuery implementation as this date range picker is not applied to form input field rather it is implemented on some div but to enter the value of date selected to the form input values, you have to use jQuery. Code and screen shot as given below : 

            <h4>Select Date Range With Options</h4>

            <div class="well" style="overflow: auto">

               <div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                  <i class="glyphicon glyphicon-calendar icon-calendar icon-large"></i>
                  <span></span> <b class="caret"></b>
               </div>

               <script type="text/javascript">
               $(document).ready(function() {
                  $('#reportrange').daterangepicker(
                     {
                        startDate: moment().subtract('days', 29),
                        endDate: moment(),
                        minDate: '01/01/2012',
                        maxDate: '12/31/2014',
                        dateLimit: { days: 60 },
                        showDropdowns: true,
                        showWeekNumbers: true,
                        timePicker: false,
                        timePickerIncrement: 1,
                        timePicker12Hour: true,
                        ranges: {
                           'Today': [moment(), moment()],
                           'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                           'Last 7 Days': [moment().subtract('days', 6), moment()],
                           'Last 30 Days': [moment().subtract('days', 29), moment()],
                           'This Month': [moment().startOf('month'), moment().endOf('month')],
                           'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        },
                        opens: 'left',
                        buttonClasses: ['btn btn-default'],
                        applyClass: 'btn-small btn-primary',
                        cancelClass: 'btn-small',
                        format: 'MM/DD/YYYY',
                        separator: ' to ',
                        locale: {
                            applyLabel: 'Submit',
                            fromLabel: 'From',
                            toLabel: 'To',
                            customRangeLabel: 'Custom Range',
                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                            firstDay: 1
                        }
                     },
                     function(start, end) {
                      console.log("Callback has been called!");
                      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                     }
                  );
                  //Set the initial state of the picker label
                  $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
               });
               </script>

            </div>

<input type="hidden" name="to" id="to" value="">
<input type="hidden" name="from" id="from" value="">

function(start, end) {
                      console.log("Callback has been called!");
                      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
       $('#to').val(start.format('MMMM D, YYYY'));
       $('#from').val(end.format('MMMM D, YYYY'));
                     }