Date and time picker using Bootstrap

Date and time picker is one of the way to implement pickers in input field , this post i will explain about how to set a pickers in input field. This is very useful to the customers to pick the date and time instead of the typing the date and time.

The first option is date and time with 24 hours time with date. and second option is select date and time with 12 hours time format and the third option is disable the date and display only the time picker and final input is section is contain the only date picker without time picker.

Bootstrap is one of the user friendly framework used to create webpages. we can create date and time picker using jquery with bootstrap framework

Include this Jquery file:

 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitterbootstrap/2.2.2/js/bootstrap.min.js"></script>

Select Date and time with 24 hours time:

<div class='well'>
  <div class='input-append date' id='datetimepicker1'>
    <input data-format='dd/MM/yyyy hh:mm:ss' type='text' />
    <span class='add-on'>
      <i data-date-icon='icon-calendar' data-time-icon='icon-time'>
      </i>
    </span>
  </div>
</div><script type='text/javascript'>
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'en'
    });
  });
</script>

Select Date and time with 12 hours time:

<div class='well'>
  <div class='input-append' id='datetimepicker2'>
    <input data-format='MM/dd/yyyy HH:mm:ss PP' type='text' />
    <span class='add-on'>
      <i data-date-icon='icon-calendar' data-time-icon='icon-time'>
      </i>
    </span>
  </div>
</div><script type='text/javascript'>
  $(function() {
    $('#datetimepicker2').datetimepicker({
      language: 'en',
      pick12HourFormat: true
    });
  });
</script>

Select only time without date:

<div class='well'>
  <div class='input-append' id='datetimepicker3'>
    <input data-format='hh:mm:ss' type='text' />
    <span class='add-on'>
      <i data-date-icon='icon-calendar' data-time-icon='icon-time'>
      </i>
    </span>
  </div>
</div><script type='text/javascript'>
  $(function() {
    $('#datetimepicker3').datetimepicker({
      pickDate: false
    });
  });
</script>

Select only Date without Time:

<div class='well'>
  <div class='input-append' id='datetimepicker4'>
    <input data-format='yyyy-MM-dd' type='text' />
    <span class='add-on'>
      <i data-date-icon='icon-calendar' data-time-icon='icon-time'>
      </i>
    </span>
  </div>
</div><script type='text/javascript'>
  $(function() {
    $('#datetimepicker4').datetimepicker({
      pickTime: false
    });
  });
</script>