Following is an example to add Calendar Control using Jquery and Font Awesome.
There are two date pickers being used here :
1. First one uses single field with a formatted date.
2. Second one uses three different boxes for month, date and year respectively.
It depends on the requirements which one to use.
Following is the code for above example. To see this running example follow the jsfiddle link here:
http://jsfiddle.net/sanjayingole/6hmdgmdo/
HTML
<div id="inputDiv">
<h3>Select a Date</h3>
<div class="dateDiv">
<input id="sampleDateField1" type="text" class="datepicker" />
<br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
</div>
<div class="dateDiv">
<input type="text" id="monthField"></input> /
<input type="text" id="dayField"></input> /
<input type="text" id="yearField"></input>
<span id="sampleDateField2"><i class='fa fa-calendar' title="select"></i></span>
<br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
</div>
<h3>Selected Date : <span id="selectedDate"></span> </h3>
</div>
There are two date pickers being used here :
1. First one uses single field with a formatted date.
2. Second one uses three different boxes for month, date and year respectively.
It depends on the requirements which one to use.
Following is the code for above example. To see this running example follow the jsfiddle link here:
http://jsfiddle.net/sanjayingole/6hmdgmdo/
HTML
<div id="inputDiv">
<h3>Select a Date</h3>
<div class="dateDiv">
<input id="sampleDateField1" type="text" class="datepicker" />
<br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
</div>
<div class="dateDiv">
<input type="text" id="monthField"></input> /
<input type="text" id="dayField"></input> /
<input type="text" id="yearField"></input>
<span id="sampleDateField2"><i class='fa fa-calendar' title="select"></i></span>
<br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
</div>
<h3>Selected Date : <span id="selectedDate"></span> </h3>
</div>
CSS
.datepicker{
width : 80px;
}
#inputDiv {
padding-left : 5px;
float : left;
width : 100%;
height : 300px;
background-color : #DFEFDD;
}
#dayField{
width : 20px;
}
#monthField{
width : 20px;
}
#yearField{
width : 40px;
}
#caltype1 {
width : 100px;
}
.dateDiv {
margin : 20px;
}
.dateFormatStr {
margin-left : 20px;
}
JAVASCRIPT
$( "#sampleDateField1" ).datepicker({
showOn: "button",
buttonText: "<i class='fa fa-calendar'></i>",
showAnim:"",
defaultDate: '',
dateFormat: "mm/dd/yy",
onSelect: function(date) {
$('#selectedDate').html(date);
}
});
$("#sampleDateField2").unbind().bind("click",function(){
$('#sampleDateField2 .ui-datepicker').show();
$( "#sampleDateField2" ).datepicker({
showOn: "button",
buttonText: "<i class='fa fa-calendar'></i>",
showAnim:"",
defaultDate: '',
dateFormat: "mm/dd/yy",
onSelect: function(date, eventField) {
//eventField returns the field on which datepicker is applied.
var day = $(this).datepicker('getDate').getDate();
var month = $(this).datepicker('getDate').getMonth() + 1;
var year = $(this).datepicker('getDate').getYear();
$('#selectedDate').html(date);
$('#dayField').val(day);
$('#monthField').val(month);
$('#yearField').val(year);
$('#sampleDateField2 .ui-datepicker').hide();
}
});
});
