Question

I have this code that updates a calendar widget and input field, while validating the date. We want the user to be able to input any type of m-d-y format (m.d.y, m-d-y, and so on). The problem is the YUI calendar widget only accepts the m/d/y format. All others it returns as NaN. I have tried a couple ways to format the date, but can’t get anything that seems to work. I would like to be able to do this with out a lot of overblown code. Does anyone have any suggestions as to the best approach here? Here is my code:

//CALENDAR --------------------------------------------------------------------------------    
var initCal = function(calendarContainer){      
    if(YAHOO.env.getVersion("calendar")){
        var txtDate = Dom.get("dateOfLoss");
        var myDate = new Date();
        var day = myDate.getDate();
        var month = myDate.getMonth() +1;
        var year = myDate.getFullYear() -1;
        var newDate = month + "/" + day + "/" + year;

        function handleSelect(type, args, obj){
            var dates = args[0];
            var date = dates[0];
            var year = date[0], month = date[1], day = date[2];

            txtDate.value = month + "/" + day + "/" + year;
            aCal.hide();
        }

        function updateCal(){   
            if (!(txtDate.value.match(/((\d{2})|(\d))\/|\-((\d{2})|(\d))\/|\-((\d{4})|(\d{2}))/))) {                
                alert("Enter date in mm/dd/yy or mm/dd/yyyy format.");
            }
            else {
                if (txtDate.value != "") {
                    aCal.select(txtDate.value);
                    var selectedDates = aCal.getSelectedDates();
                    if (selectedDates.length > 0) {
                        var firstDate = selectedDates[0];
                        aCal.cfg.setProperty("pagedate", (firstDate.getMonth() + 1) + "/" + firstDate.getFullYear());
                        aCal.render();
                    }
                    else {
                        alert("Date of Loss must be within the past year.");
                    }

                }
              }






        }

        var aCal = new YAHOO.widget.Calendar(null, calendarContainer, {
            mindate: newDate,
            maxdate: new Date(),
            title: "Select Date",
            close: true
        });

        aCal.selectEvent.subscribe(handleSelect, aCal, true);
        aCal.render();

        Event.addListener("update", "click", updateCal);
        Event.addListener(txtDate, "change", function(e){
            updateCal();

        });

        // Listener to show the 1-up Calendar when the button is clicked
        // Hide Calendar if we click anywhere in the document other than the calendar
        Event.on(document, "click", function(e){
            var el = Event.getTarget(e);
            if(Dom.hasClass(el, "calendarButton"))
                aCal.show(); 
            else if (Dom.hasClass(el, "link-close") || !Dom.isAncestor(calendarContainer, el)) 
                aCal.hide();                
        }); 
    }
    else {
        var successHandler = function() {       
            initCal(calendarContainer);     
        };

        OURPLACE.loadComponent("calendar", successHandler);
    }            
};    

Answer 1

var updateCal = function(){         
            if (!(txtDate.value.match(/^(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.]\d\d+$/))) {   

                return;
            }
            //else if ((txtDate.value.match(/^(0?[1-9]|1[012])[- .](0?[1-9]|[12][0-9]|3[01])[- .]\d\d+$/))) {                                               

            //} 
            else {                  
                var changedDate = txtDate.value;
                changedDate = changedDate.replace(/[. -]/g, "/");       
                txtDate.value = changedDate;
                badClaimDate = claimDateWithinPastYear();
                aCal.select(changedDate);                   

I used a RegEx to determine which, if any, delimiters needed to be replaced and simply used .replace.