How to disable previous days in default DHTML calendar?

I used the following code,

<script type="text/javascript">
 Calendar.setup({
        inputField : '_dob',
        ifFormat : '%m/%e/%y',
        button : '_dob_trig',
        align : 'Bl',
        singleClick : true,
      disableFunc: function(date) {
          var now= new Date();
        return (date.getTime() < now.getTime());
    }
    });
</script>

It works in disabling the previous dates. But when we select on valid date, nothing happens. The date is not being added to the text filed of calendar.

If I changes the month and es back , I can select date!

Any Idea?

How to disable previous days in default DHTML calendar?

I used the following code,

<script type="text/javascript">
 Calendar.setup({
        inputField : '_dob',
        ifFormat : '%m/%e/%y',
        button : '_dob_trig',
        align : 'Bl',
        singleClick : true,
      disableFunc: function(date) {
          var now= new Date();
        return (date.getTime() < now.getTime());
    }
    });
</script>

It works in disabling the previous dates. But when we select on valid date, nothing happens. The date is not being added to the text filed of calendar.

If I changes the month and es back , I can select date!

Any Idea?

• php
• javascript
• dhtml

• can you provide link to your calendar library ????? – rajesh kakawat Commented Jan 2, 2013 at 6:02
• Can point out how to get full date in DHTML calendar? – Vishnu R Commented Jan 2, 2013 at 6:43

4 Answers 4

Wow!

It might be some javascript error. I was unable to select any dates unless going and ing back from next month...

I past it by giving some if loops. My updated code is below.

<script type="text/javascript">
 Calendar.setup({
        inputField : '_dob',
        ifFormat : '%m/%e/%y',
        button : '_dob_trig',
        align : 'Bl',
        singleClick : true,
        disableFunc: function(date) {
          var now= new Date();
        if(date.getFullYear()<now.getFullYear())
        {
            return true;
        }
        if(date.getFullYear()==now.getFullYear())
        {
            if(date.getMonth()<now.getMonth())
            {
                return true;
            }
        }
        if(date.getMonth()==now.getMonth())
        {
            if(date.getDate()<now.getDate())
            {
                return true;
            }
        }
    },
    });
</script>

Greetings to everyone replied...

I had the same problem, and after debugging it, the problem seems to be that the calendar can't figure out what the current calendar date should be (because it's disabled by the disableFunc callback function). You have two options available.

1. Make sure the disableFunc function returns false for the current date. This way it won't be disabled in the calendar, and it'll function properly.

2. You can add the following lines in the calendar.js, after the if (!cell.disabled) line. (that happens to be line 1183 in my version of the file - v 1.51)

   else { this.currentDateEl = cell; }

The second option will allow you to disable the current date as well.

For those wondering what this DHTML calendar is, here is a link to it's docs: http://www.dni.ru/js/doc/html/reference.html

Disable Function should return TRUE or FALSE always.

disableFunc function: A function that receives a JS Date object. It should return true if that date has to be disabled, false otherwise. DEPRECATED (see below).

Please refer the following,

DHTML CALENDAR SETTINGS REFERENCE

But in your code disable function returns nothing... :( so it goes into js error and nothing works on event click..

check your condition,

return (date.getDate() <= now.getDate());

Return true or false according to your requirement after checking the above condition...

try the code below

 Calendar.setup({
            inputField : '_dob',
            ifFormat : '%m/%e/%y',
            button : '_dob_trig',
            align : 'Bl',
            singleClick : true,
            dateStatusFunc :    function (date) { 
                var now= new Date();
                return (date.getDate() <= now.getDate());
            }
        });