Datepicker function using PHP and Javascript

Explaination:

In this tutorial i explained about the calendar function but this is different from other calenders plugins because
in most of the calendar date function by using input box there we displayed which date selected but in this coding
the selected date is displayed in different manner like if u click on the icon of datepicker it will show u the dates
with month if we'll selected any date there it will displayed the selected dates in div manner by using the javascript
and jquery coding.In this you will be very carefull by calling the class in the div tag because that class and id's only
we have to use inthe script function.I hope this tutorial is very helpfull for the whom are to be want to apply the
calendar function in different manner they can use this function.
<form action="" name="form">
<div class="width140 float_left" id="fromDate1">
Check-In
<div class="padding_top5">
<div class="float_left width35">
<div class="dept1 "><?php echo date("M",strtotime("+1 day")); ?></div>
<div class="dept2 "><?php echo date("D",strtotime("+1 day")); ?></div>
</div>
<div class="dept3 "><?php echo date("d",strtotime("+1 day")); ?></div>
<div class="calendar" >
<input class="date maindate" name="fromDate" value="<?php echo date("Y-m-d",strtotime("+1 day")); ?>" type="hidden" />
</div>
</div>
</div>
<div class="width140 float_left" id="toDate1">
Check-Out
<div class="padding_top5">
<div class="float_left width35">
<div class="arr1 "><?php echo date("M",strtotime("+2 day")); ?></div>
<div class="arr2 "><?php echo date("D",strtotime("+2 day")); ?></div>
</div>
<div class="arr3 "><?php echo date("d",strtotime("+2 day")); ?></div>
<div class="calendar" >
<input class="date maindate" name="toDate" value="<?php echo date("Y-m-d",strtotime("+2 day")); ?>" type="hidden" />
</div>
</div>
</div>
</form>
Css Styles:
<style>
.float_left {
float: left !important;
}
.width_date289 {
padding: 5px;
width: 289px;
}
.dept1,.arr1{
color: #3696E2;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 6px 0 2px;
text-transform: uppercase;
}
.dept2,.arr2{
color: #3696E2;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.dept3,.arr3{
color: #3696E2;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 40px;
text-transform: uppercase;
}
.calendar {
background-image: url("calendar.png");
background-repeat: no-repeat;
float: left;
height: 42px;
width: 42px;
background-image: none;
}
</style>
Library files:
<script src="jquery.dd.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
Download Jquey files:
1.Downlaod Js Files
2.Download custom Js
dept1,dept2,dept3 this three classes we called it in the form in the div tag.This i sused for
the checkin funcction and arr1,arr2,arr3 this three is usefull for an checkout function.Then
we should call the div id function for to change the date function.class maindate is very important
for to change the function.
Scripts:
dtaepicker("checkin","checkout",2);
dtaepicker("checkin","checkout",1);
This two line is so important for to genereate the date.BEcause it is to call the dates by changing
the values and monthes and dates by using the below javascripts functions and above javascripts function.
fromid,toid,noofmonths this three are the attributes for to generate the datepicker.
<script>
dtaepicker("checkin","checkout",2);
dtaepicker("checkin","checkout",1);
function dtaepicker(fromid,toid,noofmonths) {
var from_exe="";
$( "#"+fromid+" .maindate" ).datepicker( {
dateFormat:'yy-mm-dd' ,
minDate: +0,
maxDate: "+1y",
numberOfMonths: noofmonths,
showOn: "both",
buttonImage: "calendar.png",
buttonImageOnly: true,
buttonText : "",
onSelect : function(dateText, inst) {
var dates = dateText.split("-");
$("#"+fromid+" .dept1").html($.datepicker.formatDate('M', new Date(dates[0], dates[1] - 1, dates[2])));
$("#"+fromid+" .dept2").html($.datepicker.formatDate('D', new Date(dates[0], dates[1] - 1, dates[2])));
$("#"+fromid+" .dept3").html($.datepicker.formatDate('dd', new Date(dates[0], dates[1] - 1, dates[2])));
var d = new Date(dates[0], dates[1] - 1, dates[2]);
d.setTime(d.getTime() + 86400000); // sets to date to net date
$("#"+toid+" .maindate").val($.datepicker.formatDate('yy-mm-dd', d));
$("#"+toid+" .arr1").html($.datepicker.formatDate('M', d));
$("#"+toid+" .arr2").html($.datepicker.formatDate('D', d));
$("#"+toid+" .arr3").html($.datepicker.formatDate('dd', d));
from_exe = "true";
},
onClose: function(selectedDate,instance) {
var toDate = $("#"+toid).css("display");
if(toDate == "block") {
if(selectedDate) {
$( "#"+toid+" .maindate" ).datepicker( "option", "minDate", selectedDate );
}
if(from_exe == "true" && noofmonths == 2) {
$("#"+toid+" .ui-datepicker-trigger").trigger('click');
}
}
from_exe = "";
}
});
$( "#"+toid+" .maindate" ).datepicker( {
dateFormat:'formatDate' ,
minDate: +0,
maxDate: "+1y",
numberOfMonths: noofmonths,
showOn: "both",
buttonImage: "calendar.png",
buttonImageOnly: true,
buttonText : "",
onSelect : function(dateText, inst) {
var dates = dateText.split("-");
$("#"+toid+" .arr1").html($.datepicker.formatDate('M', new Date(dates[0], dates[1] - 1, dates[2])));
$("#"+toid+" .arr2").html($.datepicker.formatDate('D', new Date(dates[0], dates[1] - 1, dates[2])));
$("#"+toid+" .arr3").html($.datepicker.formatDate('dd', new Date(dates[0], dates[1] - 1, dates[2])));
},
onClose: function( selectedDate ) {
if(selectedDate) {
$( "#"+fromid+" .maindate" ).datepicker( "option", "maxDate", selectedDate );
}
}
});
}
</script>
In the above code the scripts using the formatDate is formatDate on select on the date it will displayed
the datepicker using the javascripts and jquery files.This tutorila is very helpfull for the developers.

                 

PHP Form: