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>