|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
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 + '"> </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 + '"> </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+'\');">«</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+'\');">»</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> </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> </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 | |
|
|
|
