Friday, 10 June 2016

Jquery date picker

jQuery is very powerful library in javascript. javascript giving lots of functionality. Here is a date functionality with validation. Here is example of jQuery date picker. Two date picker one is have id from and second is have id to.

In this example we set min date of second calendar from first calendar, and max date of first calendar from second calendar. When you select date from first calendar min date automatically set of second calendar as well as when you select date from second calendar max date automatically set in first calendar.

CSS and js file for include

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Html code :-
From <input type="text" id="first" placeholder="Start Date"/>
to <input type="text" id="second" placeholder="End Date"/>

Javascript code :-
 $( "#first" ).datepicker({
  changeMonth: true, 
  changeYear:true,
  maxDate:0,
  dateFormat: 'yy-mm-dd',
  onSelect: function( selectedDate ) {
   $( "#second" ).datepicker( "option", "minDate", selectedDate );
  }
 });
 $( "#second" ).datepicker({
  changeMonth: true,
  changeYear:true,
  maxDate:0,
  dateFormat: 'yy-mm-dd',
  onSelect: function( selectedDate ) {
   $( "#first" ).datepicker( "option", "maxDate", selectedDate );
  }
 });

How to use bootstrap -3 Date time picker


Include following file in following sequence :-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

HTML code of date time picker :-
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

Validation code for date time picker :-
<script type="text/javascript" >
$(document).ready(function(){
var startDate = new Date();
var endDate = startDate.setMinutes(startDate.getMinutes() + 30);
$(function () {
$('#datetimepicker1').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
},
defaultDate : startDate,
ignoreReadonly: true
});

$('#datetimepicker2').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
},
defaultDate : endDate,
ignoreReadonly: true
});

$('#datetimepicker1').data("DateTimePicker").minDate(startDate);
$('#datetimepicker2').data("DateTimePicker").minDate(endDate);

$("#datetimepicker1").on("dp.change", function (e) {
var mindate = new Date(e.date);
mindate.setMinutes(mindate.getMinutes() + 30);
$('#datetimepicker2').data("DateTimePicker").minDate(mindate); });
$("#datetimepicker2").on("dp.change", function (e) {
var maxdate = new Date(e.date);
maxdate.setMinutes(maxdate.getMinutes() - 30);
$('#datetimepicker1').data("DateTimePicker").maxDate(maxdate); });

});
});
</script>
Snapshot of date time picker :-
It's example of how to apply default, minimum and maximum date-time. Here only one example you can see more example in bootstrap date-time picker doc.
Resource :-
https://eonasdan.github.io/bootstrap-datetimepicker/
https://github.com/Eonasdan/bootstrap-datetimepicker