Not selectable dates
2004/10/01 06:43
Viewed 68078 times
Replies: 4/19

Is it possible to creat e only a window of dates that the site visitor can select. For instance: a camping site is openonly from May 1st, thru Sep 30.
It would be nice that in case of making a reservation the dates before May 1st are not selecteble. Also voor the dates after Sep 30.

Re: Not selectable dates
2004/10/01 11:49
Viewed 76117 times
Replies: 5/13

Yes, this is possible.

You have to provide a function that takes a date and returns that day's status, so that the calendar knows wether to disable it or not.  Here's some sample code:

function dateStatus(date) {
var min = new Date(2004,09,30);
var max = new Date(2004,10,05);
if (date.getTime() < min.getTime() ||
date.getTime() > max.getTime())
return true; // true says "disable"
else
return false; // leave other dates enabled
}

Then you need to include this function at Calendar.setup(), like this:

Calendar.setup({
...
dateStatusFunc : dateStatus
...
});

The calendar will call this function for each date in a month and, depending on the result, it will take an action on that date: if your function returns true then the date will be disabled, if it returns false then nothing happens and if it returns a string then that string will be appended to the date's CSS class, thus allowing you to have some “special

last
Re[2]: Not selectable dates
2004/10/01 12:55
Viewed 83067 times
Replies: 0/0

It sure did !! THNX a lot !

last
Re[2]: Not selectable dates
2004/10/10 13:54
Viewed 82619 times
Replies: 2/4

This way we have the days blocked for selection but the user can still browse thru all the remaining months. It would be very nice it (for the same example: a camping site) if the not valid months would also be invisible. I could limit the year within the code, I would like to limit the months in an equal way. Somebody has a patch already?

last
Re[2]: Not selectable dates
2005/06/21 22:12
Viewed 72457 times
Replies: 1/3

Yeah that prety much works once I got a grip on what it was doing....

last
Re[2]: Not selectable dates
2007/04/03 21:35
Viewed 40333 times
Replies: 1/1

When I impliment your code suggestion, my variation shown below, I get some strange behavior:

Calendar.setup({
inputField : "matched_level1",
ifFormat : "%m/%d/%Y",
button : "f_trigger_a",
align : "Tr",
singleClick : true,
dateStatusFunc : dateStatus1
});
function dateStatus1(date) {
var min = new Date(2007,04,03); // Today's date...
var max = new Date(2008,04,03); // Year in the future...
if (date.getTime() < min.getTime() || date.getTime() > max.getTime()) {
return true; // true says "disable"
} else {
return false; // leave other dates enabled
}
}

The calendar displays fine but instead of dates between today (04/03/2007 in my example) and a year from now (04/03/2008) being selectable, the calendar only allows dates 1 month from now (05/03/2007) to a year + 1 month from now (05/03/2008).

Any idea why?

  • b
last
Re[2]: Not selectable dates
2008/05/05 19:27
Viewed 16560 times
Replies: 0/0

Hello,

I have a form with two inputfields for a period. The First one is the from an the secend one is a to date. If the from date is chosen via the calendar I want the to calendar to disable every date < the from date.

My code for this looks like this:

                    <div id="content_input_epoch_start_lable" class="text">Von:</div>
<div id="content_input_epoch_start_input">
<input type="text" style="width:70px;height:13px;" name="f_date" class="solid" id="f_date" readonly="true" />&nbsp;
<img id="f_trigger" style="vertical-align: -35%" src="http://travelload.de/partner/my-travelload.de/messagecenter/gfx/cal.gif">
</div>
<div id="content_input_epoch_stop_lable" class="text">bis:</div>
<div id="content_input_epoch_stop_input">
<input type="text" style="width:70px;height:13px;" name="t_date" class="solid" id="t_date" readonly="true" />&nbsp;
<img id="t_trigger" style="vertical-align: -35%" src="http://travelload.de/partner/my-travelload.de/messagecenter/gfx/cal.gif">
</div>
<script type="text/javascript">


Calendar.setup({
inputField : "f_date", // id of the input field
ifFormat : "%d.%m.%Y", // format of the input field
showsTime : false, // will not display a time selector
button : "f_trigger", // trigger for the calendar (button ID)
singleClick : true, // single-click mode
step : 1 // show all years in drop-down boxes (instead of every other year as default)
});
Calendar.setup({
inputField : "t_date", // id of the input field
ifFormat : "%d.%m.%Y", // format of the input field
showsTime : false, // will not display a time selector
button : "t_trigger", // trigger for the calendar (button ID)
singleClick : true, // single-click mode
step : 1, // show all years in drop-down boxes (instead of every other year as default)
dateStatusFunc : dateStatus
});

function dateStatus(date) {
var minDateString = document.getElementById("f_date").value;
var dateParts = minDateString.split(".");
var min = new Date(dateParts[2], dateParts[1] -1, dateParts[0]);
if (date.getTime() < min.getTime())
return true; // true says "disable"
else
return false; // leave other dates enabled
}
</script>

The disabling works fine, but if a from date is chosen the to calendar will not close after I clicked a date an does not fill a date to the Inputfield, unless I change the month or year (when I step back afterwards it works also fine).

Thx for help

last
Show / Hide methods
2006/04/26 17:40
Viewed 52808 times
Replies: 1/1
by Oleh

Hi Folks! I have one problem: cant call Show / Hide calendar methods... All the time getting message: "Object doesnt support this property or method".

So my question: Is it possible to hide popup (flat) calendar onClick?
something like: <input type="button" value="hide" onClick="hideLayer('calendar-container');return false">

same for show...

thanks everybody...

last
Re: Show / Hide methods
2007/03/14 18:06
Viewed 40608 times
Replies: 0/0

DUDE !!!! You are the master. You are my hero. Send me your email address and I will send you $10 in paypal or whatever you want because this works fantastically !! I greatly appreciate you finding and posting this FIX !!!!

THANK YOU THANK YOU THANK YOU THANK YOU.

last
Highlight Friday instead of Sunday
2008/01/12 14:06
Viewed 21175 times
Replies: 1/1

Is it possible to highlight Friday instead of Sunday. In my country (Bangladesh) we have official holiday in Friday and Saturday.

last
Re: Highlight Friday instead of Sunday
2008/12/03 11:09
Viewed 110 times
Replies: 0/0

It's in calendar-en.js (or whichever language file you use).

Look for this:
Calendar._TT["WEEKEND"] = "0,6";

Change it to:
Calendar._TT["WEEKEND"] = "5,6";

Done.

last
Error too much recursion when using tag
2008/05/23 14:40
Viewed 14679 times
Replies: 0/0
Hi every body.
I'm developing a portlet in liferay. I want to have a textbox that is a date input.

1. Error too much recursion when using <liferay-ui:inputdate> tag:
Errors follow when I bugged by Firebug in Firefox Browser:

too much recursion
d.__msh_oldSetFullYear(y);
at calendar.js (line 1672)

In jsp file I add following line:
<%@ include file="/html/portlet/ext/hello_world/init.jsp" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

Hello world!
<br/>
<liferay-ui:input-date yearRangeEnd="2010" yearRangeStart="2000"></liferay-ui:input-date>

2. I'm used dynarch calendar example in my portlet but I got same errors in session 1 above.
I've modified code to link to js in liferay:

<link rel="stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/skins/aqua/theme.css" title="Aqua" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-blue.css" title="winter" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-blue2.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-brown.css" title="summer" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-green.css" title="green" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-win2k-1.css" title="win2k-1" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-win2k-2.css" title="win2k-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-win2k-cold-2.css" title="win2k-cold-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="<%= themeDisplay.getPathContext() %>/html/css/calendar-system.css" title="system" />

<!-- import the calendar script -->
<script type="text/javascript" src="<%= themeDisplay.getPathContext() %>/html/js/calendar/calendar.js"></script>

<!-- import the language module -->
<script type="text/javascript" src="<%= themeDisplay.getPathContext() %>/html/js/calendar/lang/calendar-en.js"></script>

Please help me. Thank you very much.
last
Google