As my very first blog post I'll show you how to create a date-time picker where you get a small calender popup when clicked on the text box.So the selected value/date will be displayed in the text box.
Pre-requisites:
- Install a web development platform with Apache, PHP and MySQL (eg: wamp/xamp ) or install Apache, PHP and MySQL separately.
- Install a text editor. (better : with features specific to the PHP scripting language. I'm using Dreamweaver)
- set up a testing server (localhost).
This is how it'll look like at the end...
So here we go...
1) Create a new php files ( DateTimePicker.php & Duration.php ) .
 | |
2) Add a form with two text boxes with ids of 'from' and 'to' in DateTimePicker.php file
(Newly added code shown in a blue color,comment lines shown in red )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DateTime Picker</title>
</head>
<body>
<div>
<form action="Duration.php" method="post"> <!-- On submit redirect to "Duration.php" file-->
<table width="263" border="0" cellpadding="1" align="center">
<tr>
<td><strong><font size="+1">From :</font></strong></td>
<td><input type="text" id="from" name="txtFromDate" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
After entering above code it'll generate this (preview the code in a browser)
-------------------------------------------------------------------------------------------------------------------
3) Within the <head> tag code below 3 lines
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
________________________________________________________________________________
DateTimePicker.php (Newly added code shown in a blue color,comment lines shown in red )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DateTime Picker</title>
</head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<div>
<form action="Duration.php" method="post">
<table width="263" border="0" cellpadding="1" align="center">
<tr>
<td><strong><font size="+1">From :</font></strong></td>
<td><input type="text" id="from" name="txtFromDate" /></td>
</tr>
<tr>
<td><strong><font size="+1">To :</font></strong></td>
<td><input type="text" id="to" name="txtToDate" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
4) Within the <body> tag and <div> code below script
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
____________________________________________________________________
DateTimePicker.php (Newly added code shown in a blue color)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DateTime Picker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( "#from" ).datepicker({ <!-- #from here 'from' is my textbox id , so you can use #yourtextboxid instead #from -->
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<div>
<form action="Duration.php" method="post"><!-- On clcicking submit button redirect to "Duration.php" file-->
<table width="263" border="0" cellpadding="1" align="center">
<tr>
<td><strong><font size="+1">From :</font></strong></td>
<td><input type="text" id="from" name="txtFromDate" /></td> <!--text box id is 'from' -->
</tr>
<tr>
<td><strong><font size="+1">To :</font></strong></td>
<td><input type="text" id="to" name="txtToDate" /></td><!--text box id is 'to' -->
</tr>
</table>
</form>
</div>
</body>
</html>
All done now when previewed on browser it'll look like this....
Hope this helped....
Please leave a comment if did.
Suggestions for improvements are also welcomed :)
...Happy Coding...
No comments:
Post a Comment