开发者

validate jquery datepicker date against disabled days

I have a datepicker that has disabled dates for when a store is closed. Users can still type into this field and the datepicker is not validating against dates that are disabled in the picker. It actually doesn't even honor the max/min dates either... How would I go about doing开发者_如何学JAVA this?

$("#date").datepicker({
    beforeShowDay : function(date) {
        var day = date.getDay();
        return [(day != 0)];
    },
    minDate : '08/10/2011',
    onClose: function(dateText, inst) {
        try {
            $.datepicker.parseDate('dd/mm/yy', dateText);
        } catch (e) {
            $(this).datepicker("setDate", '');
        };
    }
});

Edit:

I ended up rolling my own validation for text input. See below:

    var today = '08/10/2011';

$("#date").datepicker({
    beforeShowDay : function(date) {
        var day = date.getDay();
        return [(day != 0 && day != 1 && day != 6)];
    },
    minDate : today,
    onClose : function(dateText) 
    {
        if(dateText)
            try {
                var date = $.datepicker.parseDate('mm/dd/yy', dateText);
                var day = new Date($(this).val()).getDay();
                if(day == 0 || day == 1 || day == 6) 
                {
                    alert('Sorry, the clinic is closed on ' + dateText);
                    $(this).datepicker("setDate", '');
                }
                if(date.getTime() - new Date(today).getTime() < 0) 
                {
                    alert('Please select a future date: ex. (' + today + ')');
                    $(this).datepicker("setDate", '');
                }
            } catch (e) {
                alert('Please provide a valid date: ex. (' + today + ')');
                $(this).datepicker("setDate", '');
            };
    }
});


The problem is that the jQuery restrictions apply to the date selector popup but not to the text input it's tied to. So you can either roll your own validation using something like the jQuery validation framework, or a simpler solution is to disable the text box so the user can only provide the date using the selector.

<div>
    <p>Date: <input type="text" id="date" disabled="disabled"/></p>
</div>

$(function() {
    $( "#date" ).datepicker({            
        showOn: "button",
        buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        minDate: ...,
        maxDate: ...
    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜