Demo:
Example of submiting value: click here
Download zip file: calendar.zip (41.13
KB.)
Version 3.69 (21 May 2013)
What's new
Version 3.69
- [Added] Use php DateTime class to handle date and also support for year 2038 and later (limited to php version >= 5.3.0)
- [Fixed] Check valid of Today date if it is in range of enabled date
- Minor bug fixed and adjustment
Version 3.68
- [Fixed] 1st and 31st (on each month) are always disabled when running with php4
Version 3.67
- [Fixed] Javascript possible error on Date.parse
- [Fixed] Add on-change javascript in dropdown datepicker mode
Version 3.66
- [Fixed] json checking function produce error when the php does not support for json
Version 3.65
- [Fixed] Date selected hilight error
- [Added] Auto hide calendar and make it default property
- [Added] Auto focus an overlapping calendar to the top
Version 3.64
- [Fixed] Incorrect parameter submited on javascript that caused an invalid date returned
Version 3.63
- [Changed] Make the DatePair function selectable on any dates. Date-from must be before Date-to, and on the other hand, otherwise it will be reset
Version 3.62
- [Fixed] Error displaying date on Jan 2012 and some other months
Version 3.61
- [Added] Display weeks
- [Added] RTL supported
- [Added] startDate function for selecting any days as start day of week
- [Adjusted] Rearrange source code on calendar_form.php
Version 3.60
- [Added] Add X as background of disabled days
- [Fixed] 'Day' combobox contain no list dropdown when not call setDate() on initialization
- [Fixed] Fixed display style still have the default value in case of the date is disabled.
- [Fixed] 'Today' date color disappear when date is disabled.
- [Fixed] Javascript error from IE compatible not support for JSON
- [Adjusted] Change the color of today date to green with border
Version 3.59
- Update to match the version with localization
Version 3.58
- [Fixed] the value of calendar is not restored when using back button on browser
Version 3.57
- [Fixed] update calendar.css display glitch
Version 3.56
- [Fixed] error on checkSpecifyDate, calendar.js
Version 3.55
- [Fixed] 'dateAllow' contains error on calendar_form.php
Version 3.54
- [Update] 'setSpecificDate' to set on month, year, and no recursive simultaneuosly
- [Added] 'setOnChange' to customize onChange event of calendar
Version 3.53
- [Fixed] writeYear contains unused variable (error), sorry guys :(
Version 3.52
- [Fixed] datepair error after cleaned up code (on version 3.50)
Version 3.51
- [Added] check_json_encode and check_json_decode for the server that not support json
Version 3.50
- [Added] setSpecificDate to enable or disable date specified
- [Improved] Cleaning up and more validating source codes (thanks to Peter)
Version 3.41
- [Fixed] calendar header - look tight
- [Fixed] Using incorrect path on example file (index.php), forgot to add history logs on class file
Version 3.4
- [Added] setAlignment
- [Added] setDatePair
Version 3.3
- [Fixed] Total number of days in datepicker mode on startup incorrectly appear (thanks to Francois du Toit, ciprianmp)
Version 3.2
- [Fixed] Some confusion in date display when both dateAllow and setYearInterval are set in some cases
- [Fixed] add 'zindex' property to tc_calendar, helps in overlapping component (ie6)
- [Improved] Year navigate from newest to oldest
Version 3.1
- [Added] disabledDay (thanks to Jim R.)
- [Improved] Day style adjustable with css (.mon, .tue, .wed, .thu, .fri, .sat, .sun)
Version 3.0
- [Fixed] day combobox not update (February case) when select date from calendar
- [Fixed] auto resize not applied when calendar start in hide div mode (display: none;)
- [Fixed] day combo box not update when selecting date < 10 (occured from v2.9)
- [Fixed] (18 May 2010) glich on IE7 update on calendar_form.php and calendar.css
- [Fixed] (22 May 2010) parseInt error on calendar.js function isDateAllow()
Version 2.9
- [Improved] Auto adjust calendar size (width & height)
- [Fixed] Valid day combo box when selecting month or year (input box mode)
Download tc_calendar with language pack (by Ciprian)
Demo: http://www.ciprianmp.com/scripts/calendar/
Download: http://www.ciprianmp.com/scripts/calendar/calendar_localized.zip
Appreciate the Localized Calendar Class and want us to improve?
Please consider making a donation
to Localized Calendar Class developer Ciprian (ciprianmp).
Thank you! :)
Copyright
This calendar datepicker is totally free to use. You can use it in all of your projects without any costs.
How to setup:
Only 2 steps requires for setup and use this calendar component.
Put the javascript file(.js) in the head section or somewhere else but it should be include once in a page.
<head>
<script language="javascript" src="calendar.js"></script>
</head>
Create form element in the html and put the following code
<form action="somewhere.php" method="post">
<?php
require_once('classes/tc_calendar.php');
$myCalendar = new tc_calendar("date1", true); $myCalendar->setIcon("images/iconCalendar.gif"); $myCalendar->setDate(1, 1, 2000);
$myCalendar->writeScript(); ?>
</form>
How to get the value?
To get the date selected in calendar by php after submit the form, simple write script as the following:
<?php
$theDate = isset($_REQUEST["date1"]) ? $_REQUEST["date1"] : "";
?>
The above script should be on another file that html form point to. The parameter 'date1' is the object name that you set in the code at the time calendar construct. See further in Functions and Constructor below.
To get the date selected by javascript on the current page, write script as the following:
<form action="somewhere.php" method="post" name="form1">
<?php
require_once('classes/tc_calendar.php');
$myCalendar = new tc_calendar("date1", true); $myCalendar->setIcon("images/iconCalendar.gif"); $myCalendar->setDate(1, 1, 2000);
$myCalendar->writeScript(); ?>
</form>
<script language="javascript">
<!--
function showDateSelected(){
alert("Date selected is "+document.form1.date1.value);
}
//-->
</script>
<a href="javascript:showDateSelected();">Check calendar value</a>
Calendar Properties
rtl - specify the right-to-left direction of calendar
Ex. $myCalendar->rtl = true;
zindex - specify the zindex value to calendar
Ex. $myCalendar->zindex = 99;
Calendar Functions
Constructor
tc_calendar (string bindObjectName)
tc_calendar (string bindObjectName, boolean date_picker)
tc_calendar (string bindObjectName, boolean date_picker, bool show_input)
date_picker default value is false.
show_input default value is true
Methods
autoSubmit (bool flag, string form_name, string target_url)
Specify the calendar to auto-submit the value. Default value of autosubmit is false
To set calendar auto submit, specify flag to true and you need to specify either form_name or target_url to make the calendar to perform autosubmit correctly
Ex 1. $myCalendar->autoSubmit(true, "myForm");
//assume that the calendar is in the form named 'myForm', then tell the calendar to auto submit the value (other values in myForm will be submitted together by html post method)
Ex 2. $myCalendar->autoSubmit(true, "", "anywhere.php");
//tell the calendar to submit the value to 'anywhere.php'. This method will submit only calendar value via html get method
dateAllow (date from, date to, bool navigate_not_allowed_date)
Specify date range allow to select. Other dates from input will be disabled. The parameter navigate_not_allowed_date will handle the user to navigate over the disable date, default is true (means allow)
Specify both date from and to will set range of date user can select.
Specify only date from or to will set range from/upto year set by setYearInterval method.
Ex 1. $myCalendar->dateAllow('2008-05-13', '2010-03-01', false); //allow user select date from 13 May 2008 to 1 Mar 2010
Ex 2. $myCalendar->dateAllow('2008-05-13', '', false); //allow user select date from 13 May 2008 upto whatever can navigate
Ex 3. $myCalendar->dateAllow('', '2010-03-01', false); //allow user select date from whatever can navigate upto 1 Mar 2010
disabledDay (string day)
Specify day column to be disabled. Possible day value: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Ex. $myCalendar->disabledDay('Sun'); //disable Sunday column
getDate ()
Get the calendar value in date format YYYY-MM-DD
Ex. $myCalendar->getDate(); //return 2009-06-19
setAlignment (string horizontal_align, string vertical_align)
Optional: Set the alignment of calendar datepicker with the calendar container. The value of horizontal alignment can be 'left' or 'right' (default) and the value of vertical alignment can be 'top' or 'bottom' (default).
Ex. $myCalendar->setAlignment('left', 'top');
setAutoHide (bool auto, int delay_time)
Optional: Set an auto hide of calendar when not active. The calendar has default value of auto hidden since version 3.65 with default delay time of 1000 (1 second)
Ex 1. $myCalendar->setAutoHide(true, 3000); //auto hide in 3 seconds
Ex 2. $myCalendar->setAutoHide(false);
setDate (int day, int month, int year)
Optional: Set default selected date to the value input. For month parameter: January=1 and December=12
Ex. $myCalendar->setDate(15, 6, 2005); //Set the date to 15 June 2005
setDateFormat (string format)
Optional: Set the format of date display when no input box. Apply with 'showInput' function
Ex. $myCalendar->setDateFormat('j F Y'); //date will display like '9 September 2009'
setDatePair (string calendar_name1, string calendar_name2, string default_pair_value)
Optional: Set a date pair link to calendar object. This function will work when 2 calendars are setup together.
Ex 1. $myCalendar->setDatePair('date1', 'date2'); //This means when the value of calendar 'date1' is set, the calendar 'date2' will not allow to select the date prior to 'date1'
Ex 2.
$myCalendar->setDatePair('date1', 'date2', "2011-03-26"); //suppose you are setting this value on date1 object, '2011-03-26' will be assigned as default date of date2 and calculated
setIcon (string url)
Optional: Set icon in date picker mode. If the icon is not set the date picker will show text as link.
Ex. $myCalendar->setIcon("images/iconCalendar.gif");
setHeight (int height) - deprecated since v2.9 - auto sizing applied
Optional: Set height of calendar. Default value is 205 pixels
Ex. $myCalendar->setHeight(205);
setOnChange (string value)
Optional: Set the onchange javascript function to calendar
Ex. $myCalendar->setOnChange("javascriptFunctionName()");
setPath (string path)
Optional: Set the path to the 'calendar_form.php' if it is not in the same directory as your script. The path string is a relative path to the script file.
Ex. $myCalendar->setPath("folder1/");
setSpecificDate (array dates, int type, string recursive)
Optional: Set the specific to enable or disable.
dates: the array of date, and date should be in format YYYY-MM-DD
type: enable or disable the date specified. 0=disable, 1=enable
recursive: '' (blank)=no recursive, calendar will process only on exact date, 'month'=monthly recursive, or 'year'=yearly recursive
Ex 1. $myCalendar->setSpecificDate(array("2011-04-22"));
Ex 2. $myCalendar->setSpecificDate(array("2011-04-22"), 0, 'month'); //disable date 22 every month
Ex 3. $myCalendar->setSpecificDate(array("2011-04-22"), 0, 'year'); //disable 22 Apr on every year
setText (string text)
Optional: Set text to display. The text will show in date picker mode when the icon is not set.
Ex. $myCalendar->setText("Click Me");
setWidth (int width) - deprecated since v2.9 - auto sizing applied
Optional: Set width of calendar. Default value is 150 pixels
Ex. $myCalendar->setWidth(150);
setYearInterval (int year_start, int year_end)
Optional: Set the year start and year end display on calendar combo box. Default value is +15 and -15 from current year (30 years)
Ex. $myCalendar->setYearInterval(1970, 2020);
showInput (bool flag)
Optional: Set the input box display on/off. If showInput set to false, the date will display in panel as example above 'DatePicker with no input box'. Default value is true
Ex. $myCalendar->showInput(false);
showWeeks (bool flag)
Optional: Display weeks on calendar upon setting. Default value is false.
Ex. $myCalendar->showWeeks(true);
startDate (bool date_number)
Optional: You can choose any day as a start day of week. The possible values are 0 (for Sunday) through 6 (for Saturday). Default value is 0 (Sunday)
Ex. $myCalendar->startDate(6); //start day of week is Sat.
startMonday (bool flag) - deprecated since v3.61 - use startDate instead
Optional: Set whether the calendar will be start on Sunday or Monday. Set flag to true means the calendar will display first date as Monday, otherwise false will display first date as Sunday. Default value is false.
Ex. $myCalendar->startMonday(true);
writeScript()
Write the output calendar to the screen
|