php popup Date Picker (NO JAVA - JUST PHP ONLY)
id like to incorp a popup date picker into a site i have and id like it writen in php i have found java ones here are a few examples
http://www.calendarxp.net/tt_pop.shtml
and
http://www.javascriptkit.com/script/script2/timestamp.shtml
if i have a choice id like to have it slide out.
id like it in the format of YYYY-MM-DD for the forms input box
id like it in colors and to have a year/month/day picker just like the samples in java
im pretty flexible on this
and thanks in advane for any help
i wouldnt know the first place to start looking or evan how to code such a thing
Johnny
aka Pern
http://www.calendarxp.net/tt_pop.shtml
and
http://www.javascriptkit.com/script/script2/timestamp.shtml
if i have a choice id like to have it slide out.
id like it in the format of YYYY-MM-DD for the forms input box
id like it in colors and to have a year/month/day picker just like the samples in java
im pretty flexible on this
and thanks in advane for any help
i wouldnt know the first place to start looking or evan how to code such a thing
Johnny
aka Pern
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
lozloz;
Thanks for the reply and the nifty explination
i belive ive seen a php one someplace but for the life of me i cant remeber where.
in reply to your message:
What about a clicked icon like the java does to fire it.
if you look at thoses examples it has an icon on the page(query box)
{i dont have a problem with java so to speak i would just rather have the calender in php as i can understand php and i dont like java much and i try to not use it.}
the action would be to press an icon next to the input field to have the php calander popup.
i may use the java ones i gave examples for..as said id rather use php.
the form is html based and yes i can incorp the java into it.
any other answers???
thanks again!
Johnny
aka Pern
Thanks for the reply and the nifty explination
i belive ive seen a php one someplace but for the life of me i cant remeber where.
in reply to your message:
What about a clicked icon like the java does to fire it.
if you look at thoses examples it has an icon on the page(query box)
{i dont have a problem with java so to speak i would just rather have the calender in php as i can understand php and i dont like java much and i try to not use it.}
the action would be to press an icon next to the input field to have the php calander popup.
i may use the java ones i gave examples for..as said id rather use php.
the form is html based and yes i can incorp the java into it.
any other answers???
thanks again!
Johnny
aka Pern
hi,
i developed an events calendar once adapting some code for a basic calendar to include events. you could possibly incorporate it by having the icon which loads a popup window with this calendar class on it, fetching the current month from the query string.
the class is here: http://www.cascade.org.uk/software/php/calendar/index.php
so on your main page:
<a onClick="return open_popup("calendar_picke
then you'd have calendar_picker.php having code to display the current month. you'd need to adapt it a bit to basically make each day a link which would have the href as: javascript:window.opener.d
basically there you'd need to change form to the name of your form on the main page and field to that of the input field which will contain your date. also you'd have to change $timestamp to that of the timestamp for that month, or change the function to simply output the month if the class allows you to do that
hope that helps in some sort of way, it's quite hard to explain. have a look at that php calendar anyway
cheers,
loz
i developed an events calendar once adapting some code for a basic calendar to include events. you could possibly incorporate it by having the icon which loads a popup window with this calendar class on it, fetching the current month from the query string.
the class is here: http://www.cascade.org.uk/software/php/calendar/index.php
so on your main page:
<a onClick="return open_popup("calendar_picke
then you'd have calendar_picker.php having code to display the current month. you'd need to adapt it a bit to basically make each day a link which would have the href as: javascript:window.opener.d
basically there you'd need to change form to the name of your form on the main page and field to that of the input field which will contain your date. also you'd have to change $timestamp to that of the timestamp for that month, or change the function to simply output the month if the class allows you to do that
hope that helps in some sort of way, it's quite hard to explain. have a look at that php calendar anyway
cheers,
loz
ASKER
lozloz;
Thanks again for the reply.
I decided to go with the java calxp one ( http://www.calendarxp.net/tt_pop.shtml )
i emailed the author and he said i could use it foir what i am doing.
I figured your right and i should not try to reinvent the wheel so to speak.
Ive never had an answer before so im not sure how to award the points.
I also have a question about it and am asking your advice on it.
Altho i used your orginal reply and went with java(as the why not use java parts)
was wondering how i shopuld award the points.
i pay for my membership so i dont really care abou the points
(as i said only time so far ive had to use um)
awaiting your reply
Johnny
aka Pern
ps: my votes i give you the points (thanks againf for your time)
Thanks again for the reply.
I decided to go with the java calxp one ( http://www.calendarxp.net/tt_pop.shtml )
i emailed the author and he said i could use it foir what i am doing.
I figured your right and i should not try to reinvent the wheel so to speak.
Ive never had an answer before so im not sure how to award the points.
I also have a question about it and am asking your advice on it.
Altho i used your orginal reply and went with java(as the why not use java parts)
was wondering how i shopuld award the points.
i pay for my membership so i dont really care abou the points
(as i said only time so far ive had to use um)
awaiting your reply
Johnny
aka Pern
ps: my votes i give you the points (thanks againf for your time)
to award points you simply accept an answer by clicking on the accept button next to a comment on the question. if you need to split the points between multiple answers in the future, there's an option at the bottom of the page to do this, but that's not relevant here seeing as i'm the only one who has commented. you choose a grade to match the standard of the replies as well
as for the question, i think using those premade jscript calendars are best seeing as there's no need to complicate it by adding php. if you want me to modify the javascript to change it to your format of data/time or colours then leave another message and i'll try and help out
cheers,
loz
as for the question, i think using those premade jscript calendars are best seeing as there's no need to complicate it by adding php. if you want me to modify the javascript to change it to your format of data/time or colours then leave another message and i'll try and help out
cheers,
loz
Re:
I use the code below on my website.
It support multiple date selection fields. Whenever you want to have a date-selection field, you use the line below to add one, changing 'Fieldname' with any name you like/require.
<script type="text/javascript">add
In order for the above code to work, you have to add the javascript functions below into your <head> section:
<script>
var ffield;
function addCal(field)
{
document.write('<a href="calendar.php" target="_blank" style="margin:2px;" onClick="return showCal(' + field + ');"><img height="16" width="16" src="i/calendar.gif" border="0"></a>');
}
function showCal(field)
{
ffield = field;
window.open('calendar.php'
return false;
}
function calendarPopupClick(value)
{
status = value;
if(ffield) ffield.value = value;
}
</script>
The addCal method ads a text-input field with a clickable image right next to it. When the image is clicked, the name of the textfield is stored in a javascript variable, just before a popup window is opened showing the php-calendar.
The calendar registers every dateselection and passes it to its window.opener window by calling window.opener.calendarPopu
Because the name of the appropriate fieldname was stored into the javascript variable, javascript is able to set the textfields value with the value passed by the popup.
The Calendar.php code I use is shown below:
(some th-elements contain dutch abbreviations for the weekdays, I suppose you will manage to change that by yourself quite easily)
calendar.php
<?
//Check for date selectie from query string
if (isset($_GET['monthno'])) $monthno = $_GET['monthno'];
if (isset($_GET['year'])) $year = $_GET['year'];
if (!isset($monthno)) {
$monthno=date('n');
}
if (!isset($year)) {
$year = date('Y');
}
//check the current date
$now = mktime(0, 0, 0, $monthno, 1, $year);
$monthfulltext = date('F', $now);
$monthshorttext = date('M', $now);
//number of days
$day_in_mth = date('t', $now) ;
$day_text = date('D', $now);
//Find the selected year and date
$monthno = date('m', $now);
$year = date('Y', $now);
?>
<html>
<head>
<style type="text/css">
.tdday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #8BBDDE;
font-weight: normal;
font-size: 9px;
width: 26px;
line-height: 20px;
color: #fff;
vertical-align: middle;
text-align: center;
}
.tdtoday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
border:solid 1px #87BBDD;
}
.tdheading { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 18px;
color: #000;
vertical-align: middle;
text-align: center;
background-image:url('../i
padding:0px;
}
.tddate { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E7F2F9;
font-weight: normal;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
}
.caltable { border: #a0a0a0;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px
}
#mnoprev, #mnonext {font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#999;}
#mnoprev {position:absolute;left:5p
#mnonext {position:absolute;right:5
</style>
<title>Calendar</title>
</head>
<body>
<table class="caltable" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="1" width=97%>
<tr><td colspan="7" class="tdheading"><? echo $monthfulltext." ".$year ?></td></tr>
<tr>
<td class="tdday">Zon</td><td class="tdday">Maa</td><td class="tdday">Din</td><td class="tdday">Woe</td><td class="tdday">Don</td><td class="tdday">Vri</td><td class="tdday">Zat</td>
</tr>
<tr>
<?
//When the first day in the month is not the first day of the week, add some empty cells
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, 1, $year));
if ($day_of_wk <> 0){
for ($i=0; $i<$day_of_wk; $i++)
{ echo '<td class="tddate"> </td>
}
//Show all days within the month
for ($date_of_mth = 1; $date_of_mth <= $day_in_mth; $date_of_mth++) {
if ($day_of_wk = 0){
for ($i=0; $i<$day_of_wk; $i++);
{ echo "<tr>"; }
}
$day_text = date(D, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$date_no = date(j, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$neatdate = sprintf('%04d-%02d-%02d', intval($year), intval($monthno), intval($date_of_mth));
if ( $date_no == date(j) && $monthno == date(n) )
{ echo "<td class=tdtoday>".linkify($d
else{
echo "<td class=tddate>".linkify($da
If ( $day_of_wk == 6 ) { echo "</tr>"; }
//If last day of the month is not last day of the week, add empty cells.
If ( $day_of_wk < 6 && $date_of_mth == $day_in_mth ) {
for ( $i = $day_of_wk ; $i < 6; $i++ ) {
echo "<td class=tddate> </td>";
echo "</tr>";
}
}
?>
</table>
<?php
//display links to next and previous month;
echo '<a id="mnoprev" href="?monthno='.($monthno
echo '<a id="mnonext" href="?monthno='.($monthno
/*
function linkify generates a clickable day-of-month hyperlink, in order to pass
any clicks to the parent window.
*/
function linkify($text, $date)
{
return '<a style="cursor:pointer;" onClick="window.opener.cal
}
?>
</body>
</html>
I hope this is somewhat helpfull in any way, as this is my first comment to Experts-Exchange and I might have not seen all the policies available, needed to be read before posting.
I use the code below on my website.
It support multiple date selection fields. Whenever you want to have a date-selection field, you use the line below to add one, changing 'Fieldname' with any name you like/require.
<script type="text/javascript">add
In order for the above code to work, you have to add the javascript functions below into your <head> section:
<script>
var ffield;
function addCal(field)
{
document.write('<a href="calendar.php" target="_blank" style="margin:2px;" onClick="return showCal(' + field + ');"><img height="16" width="16" src="i/calendar.gif" border="0"></a>');
}
function showCal(field)
{
ffield = field;
window.open('calendar.php'
return false;
}
function calendarPopupClick(value)
{
status = value;
if(ffield) ffield.value = value;
}
</script>
The addCal method ads a text-input field with a clickable image right next to it. When the image is clicked, the name of the textfield is stored in a javascript variable, just before a popup window is opened showing the php-calendar.
The calendar registers every dateselection and passes it to its window.opener window by calling window.opener.calendarPopu
Because the name of the appropriate fieldname was stored into the javascript variable, javascript is able to set the textfields value with the value passed by the popup.
The Calendar.php code I use is shown below:
(some th-elements contain dutch abbreviations for the weekdays, I suppose you will manage to change that by yourself quite easily)
calendar.php
<?
//Check for date selectie from query string
if (isset($_GET['monthno'])) $monthno = $_GET['monthno'];
if (isset($_GET['year'])) $year = $_GET['year'];
if (!isset($monthno)) {
$monthno=date('n');
}
if (!isset($year)) {
$year = date('Y');
}
//check the current date
$now = mktime(0, 0, 0, $monthno, 1, $year);
$monthfulltext = date('F', $now);
$monthshorttext = date('M', $now);
//number of days
$day_in_mth = date('t', $now) ;
$day_text = date('D', $now);
//Find the selected year and date
$monthno = date('m', $now);
$year = date('Y', $now);
?>
<html>
<head>
<style type="text/css">
.tdday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #8BBDDE;
font-weight: normal;
font-size: 9px;
width: 26px;
line-height: 20px;
color: #fff;
vertical-align: middle;
text-align: center;
}
.tdtoday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
border:solid 1px #87BBDD;
}
.tdheading { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 18px;
color: #000;
vertical-align: middle;
text-align: center;
background-image:url('../i
padding:0px;
}
.tddate { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E7F2F9;
font-weight: normal;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
}
.caltable { border: #a0a0a0;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px
}
#mnoprev, #mnonext {font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#999;}
#mnoprev {position:absolute;left:5p
#mnonext {position:absolute;right:5
</style>
<title>Calendar</title>
</head>
<body>
<table class="caltable" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="1" width=97%>
<tr><td colspan="7" class="tdheading"><? echo $monthfulltext." ".$year ?></td></tr>
<tr>
<td class="tdday">Zon</td><td class="tdday">Maa</td><td class="tdday">Din</td><td class="tdday">Woe</td><td class="tdday">Don</td><td class="tdday">Vri</td><td class="tdday">Zat</td>
</tr>
<tr>
<?
//When the first day in the month is not the first day of the week, add some empty cells
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, 1, $year));
if ($day_of_wk <> 0){
for ($i=0; $i<$day_of_wk; $i++)
{ echo '<td class="tddate"> </td>
}
//Show all days within the month
for ($date_of_mth = 1; $date_of_mth <= $day_in_mth; $date_of_mth++) {
if ($day_of_wk = 0){
for ($i=0; $i<$day_of_wk; $i++);
{ echo "<tr>"; }
}
$day_text = date(D, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$date_no = date(j, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$neatdate = sprintf('%04d-%02d-%02d', intval($year), intval($monthno), intval($date_of_mth));
if ( $date_no == date(j) && $monthno == date(n) )
{ echo "<td class=tdtoday>".linkify($d
else{
echo "<td class=tddate>".linkify($da
If ( $day_of_wk == 6 ) { echo "</tr>"; }
//If last day of the month is not last day of the week, add empty cells.
If ( $day_of_wk < 6 && $date_of_mth == $day_in_mth ) {
for ( $i = $day_of_wk ; $i < 6; $i++ ) {
echo "<td class=tddate> </td>";
echo "</tr>";
}
}
?>
</table>
<?php
//display links to next and previous month;
echo '<a id="mnoprev" href="?monthno='.($monthno
echo '<a id="mnonext" href="?monthno='.($monthno
/*
function linkify generates a clickable day-of-month hyperlink, in order to pass
any clicks to the parent window.
*/
function linkify($text, $date)
{
return '<a style="cursor:pointer;" onClick="window.opener.cal
}
?>
</body>
</html>
I hope this is somewhat helpfull in any way, as this is my first comment to Experts-Exchange and I might have not seen all the policies available, needed to be read before posting.
As I am unable to edit the above, I would like to add a 'working' example of the above calendar.php:
http://www.trickline.nl/events/tls/calendar.php
As the fields using this calendar are hidden within the administrators panel of my website I cannot show you a working example.
http://www.trickline.nl/events/tls/calendar.php
As the fields using this calendar are hidden within the administrators panel of my website I cannot show you a working example.
but only to response to user input by reloading the page
should read:
but only respond to user input by reloading the page
cheers,
loz