Calendar Control

Introduction

Today I will show a simple way to display the Calendar Control.

Live Demo

Calender

Coding

Plugins

<link rel='stylesheet' id='validate-engine-css-css' href='http://www.techbloginterview.com/wp-includes/css/jquery.datetimepicker.css' type='text/css' media='all' />
<script type='text/javascript' src='http://www.techbloginterview.com/wp-includes/js/datetimepicker/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='http://www.techbloginterview.com/wp-includes/js/datetimepicker/jquery.datetimepicker.js?ver=1.12.4'></script>

Html

<input id="datetimepicker" class="form-control" style="background-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png'); 
background-size: 40px 40px; background-repeat: no-repeat; padding-left: 40px;" type="text" placeholder="DD-MM-YYYY" />

Javascript

<script> 
$.datetimepicker.setLocale('ar');
$('#datetimepicker').datetimepicker({ 
     timepicker: true,
     format: 'd/m/Y', 
     validateOnBlur:true,
});
<script>

Calender With Time

Coding

Html

<input id="datetimepicker1" class="form-control" style="background-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png'); 
background-size: 40px 40px; background-repeat: no-repeat; padding-left: 40px;" type="text" placeholder="DD-MM-YYYY" />

Javascript

<script> 
$.datetimepicker.setLocale('ar');
$('#datetimepicker1').datetimepicker({ 
     timepicker: true,
     format: 'd/m/Y H:i', 
     validateOnBlur:true,
});
<script>

Multi-Language Calender(Arabic['ar'])

Coding

Html

<input id="datetimepicker_format" class="form-control" style="background-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png'); 
background-size: 40px 40px; background-repeat: no-repeat; padding-left: 40px;" type="text" placeholder="DD-MM-YYYY" />

Javascript

<script> 
$.datetimepicker.setLocale('ar');//Arabic:'ar' , Romanian:'ro' , Indonesian:'id' , Persian/Farsi:'fa'.....
$('#datetimepicker_format').datetimepicker({ 
     timepicker: true,
     format: 'd/m/Y', 
     validateOnBlur:true,
});
<script>

Range

Coding

Html

<table style="border: 0px;">
<tbody>
<tr>
<td><input id="date_timepicker_start" class="form-control" style="background-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png'); background-size: 40px 40px; background-repeat: no-repeat; padding-left: 40px;" type="text" placeholder="DD-MM-YYYY" /></td>
<td><input id="date_timepicker_end" class="form-control" style="background-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png'); background-size: 40px 40px; background-repeat: no-repeat; padding-left: 40px;" type="text" placeholder="DD-MM-YYYY" /></td>
</tr>
</tbody>
</table>

Javascript

<script> 
$('#date_timepicker_start').datetimepicker({
 format:'Y/m/d',
 onShow:function( ct ){
 this.setOptions({
 maxDate:$('#date_timepicker_end').val()?$('#date_timepicker_end').val():false
 })
 },
 timepicker:false,
validateOnBlur:true,
 });
$('#date_timepicker_end').datetimepicker({
 format:'Y/m/d',
 onShow:function( ct ){
 this.setOptions({
 minDate:$('#date_timepicker_start').val()?$('#date_timepicker_start').val():false
 })
 },
 timepicker:false,
validateOnBlur:true,
 });
<script>

References

• http://xdsoft.net/jqplugins/datetimepicker/
• http://www.jqueryscript.net/demo/Multi-language-jQuery-Date-Range-Picker-Plugin/
• http://www.jqueryscript.net/demo/Flexible-Multi-Language-jQuery-Calendar-Datepicker-Plugin-Ion-Calendar/