Joomla :: Hide past days from calendar control

Open /media/system/js/calendar-setup.js file and perform the following updates. Please make sure that this update will reflect the change in whole site(admin & front).

1. Replace the following code

param_default(“disableFunc”,null); WITH param_default(“disableFunc”,disableDate);

AND Place the below function just before the last curly bracket and semicolon(i.e. };)

function disableDate(d)
tdy = new Date();
diff = d – tdy;
dys = Math.round(diff/(1000*60*60*24));
if (dys > -1)
return false;
return true;

2. First of all I had tried it using the following code to display calendar at one of my front site page but the functionality to hide the past days doesn’t work there. However, it was working perfectly at admin area.

<input type=”text” name=”date_of_appointment” id=”date_of_appointment” size=”25″ maxlength=”25″ value=”” readonly=”true” />
<input type=”reset” value=”…” onclick=”return showCalendar(‘date_of_appointment’,’%Y-%m-%d’);” />

Reason: above code will not call calendar-setup.js file where we’ve made the changes to hide the past days from calendar. It directly calls calendar.js file located at /media/system/js directory. Obviously at admin, it works because admin site calendar behavior uses calendar-setup.js file.

3. Solution:

To get it worked exactly like admin, I’ve used the following code to display the calendar control on my front side page.

$document    = & JFactory::getDocument();
echo JHTML::_(‘calendar’,”, ‘date_of_appointment’,  ‘date_of_appointment’, ‘%Y-%m-%d’, array(‘class’=>’inputbox’, ‘size’=>’8’, ‘maxlength’=>’19’));

It works fine now @both: admin & front side as well!! 🙂

Additional tasks:

Disable all past dates

function disableDate(d)
today = new Date();
difference = d – today;
days = Math.round(difference/(1000*60*60*24));
if( days > -1 )return false;
return true;

Now replace the following code from calendar-setup.js
param_default(“disableFunc“, null) ;
to param_default(“disableFunc“, disableDate) ;

Enable Only Specific Day

function disableDate(d)
// Enable only Monday of all months
if( d.getDay()==1 ) return false ;
return true ;
Since the changes in
param_default(“disableFunc”, null);
in calendar-setup.js will reflect to all the date fields  in your site pages, in order to reflect the customization in specific date field modify above callback function to

if (params.inputField==”custom_date”)
Note: custom_date is my date text filed name

Solution to make it specific(i.e not to change at admin & front together):

if(params.inputField==’date_of_appointment’) param_default(“disableFunc”,disableDate); else param_default(‘disableFunc’,null);

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: