WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDES  |  PHP CLASSES  |  CODE SEARCH  |  ARTICLES SEARCH  |  PHP FORUMS  |  PHP MANUAL  |  PHP FUNCTIONS LIST  |  WEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search
Submit a code Example / Snippet Submit Your Code
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
WeberDev's Monthly code contest PHP Code Contest
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Index
PHP Web Logs (BLogs)
Web Development Resources
Web Development Content
PHPClasses
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder
Submit Site
Forex Trading Online forex trading platform

Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
Title : Javascript Date Picker
Categories : Java Script, Date Time, Calendar Click here to Update Your Picture
Joshy Jacob
Date : Sep 02nd 2006
Grade : 3 of 5 (graded 9 times)
Viewed : 31499
File : 4494.zip
Images : Image 1
Search : More code by Joshy Jacob
Action : Grade This Code Example
Tools : My Examples List

 
Like this code?
Show the author your appreciation.
Submit your own code examples 
 

A javascript date picker. This script uses a modified version of my 'Higly Customizable Javascript Calendar Script' (http://www.weberdev.com/get_example-4482.html). In Internet Explorer, the previously selected date can be passed. In Firefox and Opera, the current date will be shown first.

Please see attached file above.

date-picker.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Date Picker</title>
<style type="text/css">
body{margin:0px;padding:0px;}
a{text-decoration:none;}
.CalendarRed{width:100%;height:100%;}
.CalendarRed td{border:1px #F3F3F3 solid;text-align:center;}
.CalendarRed td.SelectedDay{background:#E5E5E5;color:red;}
.CalendarRed tr.TitleBar td{font-weight:bold;background:#ED0000;color:#FFF;}
.CalendarRed tr.TitleBar td a{color:#FFFFFF;}
.CalendarRed tr.Days td{}
.CalendarRed tr.Days td a{color:#000000;}
.CalendarRed tr.Days td a:hover{background:#FFCCCC;}
.CalendarRed .WeekName td{font-weight:bold;}
.CalendarRed{border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#FFFFFF;border:1px red solid;}
</style>
<script type="text/javascript">
<!--
ReturnFunc = '';
function Calendar(iYear, iMonth, iDay, ContainerId, ClassName)
{
    MonthNames = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
    //If no parameter is passed use the current date.
    oDate = new Date();
    Year = (iYear == null) ? oDate.getFullYear() : iYear;
    Month = (iMonth == null) ? oDate.getMonth() : iMonth - 1;
    while(Month < 0){Month += 12;Year--}
    while(Month >= 12){Month -= 12;Year++}
    Day = (iDay == null) ? 0 : iDay;
    oDate = new Date(Year, Month, 1);
    NextMonth = new Date(Year, Month + 1, 1);
    WeekStart = oDate.getDay();
    // Get the number of months in current month
    MonthDays = Math.round((NextMonth.getTime() - oDate.getTime()) / 86400000) + 1;
    // Check whether the Container Id is null
    if(ContainerId != null)
    {
        ContainerId = ContainerId;
        Container = document.getElementById(ContainerId);
        // If an element doesnot exists with the given ContainerId then create it
        if(!Container)
            document.write('<div id="' + ContainerId + '">&nbsp;</div>');
    }
    else
    {
        // Loop until a unique id is obtained for the container
        do
        {
            ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
        }
        while(document.getElementById(ContainerId));
        // create an element with the new id
        document.write('<div id="' + ContainerId + '">&nbsp;</div>');
    }
    Container = document.getElementById(ContainerId);
    ClassName = (ClassName == null) ? 'tblCalendar' : ClassName;
    HTML = '<table class="' + ClassName + '" cellspacing="0">';
    // Title bar
    HTML += '<tr class="TitleBar"><td class="Nav"><a href="javascript:void(0)" onMouseDown="Calendar(' + Year + ', ' + Month + ', ' + Day+', \''+ContainerId+'\', \''+ClassName+'\');">&laquo;</a></td><td colspan="5" class="Title">' + MonthNames[Month] + ' ' + Year + '</td><td class="Nav"><a href="javascript:void(0)" onMouseDown="Calendar(' + Year + ', ' + (Month + 2) + ', ' + Day+', \''+ContainerId+'\', \''+ClassName+'\');">&raquo;</a></td></tr>';
    // Week Names
    HTML += '<tr class="WeekName"><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>';
    HTML += '<tr class="Days">';
    // Fill the previous month days with space
    for(DayCounter = 0; DayCounter < WeekStart; DayCounter++)
    {
        HTML += '<td>&nbsp;</td>';
    }
    // Populate current month
    for(DayCounter = 1; DayCounter < MonthDays; DayCounter++)
    {
        if((DayCounter + WeekStart) % 7 == 1) HTML += '<tr class="Days">';
        if(DayCounter == Day)
            HTML += '<td class="SelectedDay"><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
        else HTML += '<td><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
        if((DayCounter + WeekStart) % 7 == 0) HTML += '</tr>';
    }
    // Fill the next month days with space
    for(j = (42 - (MonthDays + WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
    {
        HTML += '<td>&nbsp;</td>';
        if((j - DayCounter) % 7 == 0) HTML += '</tr>';
    }
    HTML += '</table>';
    Container.innerHTML = HTML;
    // Returns Id of the element containing the calendar
    return ContainerId;
}
function ReturnDate(Day)
{
    opener.SetDate(Day, Month+1, Year);
    window.close();
}
function MakeDate(iYear, iMonth, iDay, fn)
{
    D = new Date();
    Year = (typeof(iYear) != 'undefined') ? iYear : D.getFullYear();
    Month = (typeof(iMonth) != 'undefined') ? iMonth : D.getMonth();
    Day = (typeof(iDay) != 'undefined') ? iDay : D.getDate();
    ReturnFunc = fn;
    id = Calendar(Year, Month, Day, 'cal', 'CalendarRed');
}
//-->
</script>
</head>

<body onLoad="MakeDate();">
<div id='cal'> </div>
</body>
</html>



test.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Date Picker Test</title>
<script type="text/javascript">
<!--
function SelectDate()
{
    D = document.getElementById('Date').value;
    if(D){
        D = D.split('/');
    }else{
        Dat = new Date();
        D = new Array(Dat.getDay(), Dat.getMonth(), Dat.getFullYear());
    }
    win = window.open("date-picker.html","win","status=no,scrollbars=no,toolbar=no,menubar=no,height=150,width=150");
    if (parseInt(navigator.appVersion) == 2 && navigator.appName == "Netscape")
        win = window.open("date-picker.html","win","status=yes,height=325,width=250");
        //win'MakeDate',D[2], D[1],D[0], 'SetDate');
        win.MakeDate(D[2], D[1], D[0]);
}
function SetDate(Day, Month, Year)
{
    document.getElementById('Date').value = Day + '/' + Month + '/' + Year;
}
//-->
</script>
</head>

<body>
<form name="DateTest">
<input type="text" name="Date" id="Date" readonly><input type="button" onClick="SelectDate('Date1')" value="Select"><br>
</form>
</body>
</html>



Calendars to choose a range of dates , reservation events ...
Categories : PHP, Calendar, Java Script, Date Time
enhanced date picker with jcript checking for a dynamic date input
Categories : PHP, Java Script, Date Time, Calendar, Arrays
Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS
PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS
Clock at Status Bar
Categories : Java Script, HTML, Date Time
pcCalendar class - Allows for the creation of calendars in HTML pages. All output functions can be easily overridden, refer to article 1471 for an example.
Categories : PHP, Date Time, Calendar, PHP Classes
Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design
A simple and fast calendar combining PHP and tables. Use this as a base for applications in which a calendar is needed.
Categories : Date Time, PHP, Complete Programs, Calendar
Example of using the pcCalendar class, article 1468 on weberdev.com. Calendar example.
Categories : PHP, Date Time, PHP Classes, Calendar
Functions used to define a schedule of holidays. Can define non-fixed holidays (eg. 3rd sunday of June).
Categories : Calendar, Date Time, PHP
Monthly and Daily Upcoming Events calendar.
Categories : Date Time, PostgreSQL, PHP, Calendar, Databases
CALENDAR - easy calendar-navigation with PHP
Categories : PHP, Date Time, HTML and PHP, Calendar
A PHP Calendar function with CSS : add a cool calendar to any php page by just adding a calendar class based function.
Categories : PHP, PHP Classes, Calendar, Date Time
This script contains 2 functions: 1 to create html select object based on your own customer date format entry- "M d Y h:i.... etc". The second function processes the select object on submit back to unix time.
Categories : PHP, Calendar, Date Time, HTML and PHP
Shows the current time as a PNG-image. This script does not use the GD library. You can use it as a benchmark (because it's slow), or as a quick reference for implementing a simple PNG-file generator.
Categories : Graphics, Zlib, Calendar, PHP, Date Time