从另一个JS函数启动jQuery .datepicker

Question

I need to launch .datepicker only if the text entered into a field does not meet a set of criteria. But, I can not figure out how to launch .datepicker other than directly from a field getting focus or a button being presses.

What I'm trying to do...

The HTML

<input type="text" id="userDate" name="userDate" style="width: 100px;" onblur="checkDate(this.id);" />

The JS

function checkDate(theId)
{
    var enteredValue = document.getElementById(theId).value;
    var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria

    if (checkedValue == null)
    {
        // this is where I want to call the .datepicker to have the calendar show up
        $("#userDate").datepicker();
    }
    else
    {
        document.getElementById(theId).value = checkedValue;
    }
}

I know, this would be easier if the calendar just came up when the text field gets focus. But, this is not the way the client wants it to work. They want to accept user input as long as it falls into their desired formats. If not, then they want the calendar and a default, forced format.

Thanks.

Answer 1

If you are using the datepicker in jQuery UI, you would show the datepicker like this:

$("#userDate").datepicker("show");

Edit:

Your code would probably have to look something like this:

$(function(){
   $("#userDate").datepicker(); // <-- Create the datepicker on load
});

function checkDate(theId)
{
    var enteredValue = document.getElementById(theId).value;
    var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria

    if (checkedValue == null)
    {
        // this is where I want to call the .datepicker to have the calendar show up
        $("#userDate").datepicker("show");  // <-- Show datepicker when needed
    }
    else
    {
        document.getElementById(theId).value = checkedValue;
    }
}

Answer 2

Okay, after many cans of Pepsi Max and even more hours of research, trial and error; this is what I've come up with... and it meets my needs.

$(document).ready( function()
    {
        $("#userDate").blur(function()
        {
            var convertResults = convertMyDate('userDate'); // call to my code that checks the date for accepted formats

            if (convertResults == null)
            {
                $("#userDate").datepicker({
                    changeMonth: true,
                    changeYear: true
                });
                $("#userDate").datepicker("show");
            }
            else
            {
                document.getElementById('userDate').value = convertResults.toString('MM/dd/yyyy');
            }
        });
    });

The only problem now is that the client's form has 14 date fields. So... copy this 13 more times in my code!? I just don't have the time right now to figure out a way to roll all this into a single function that will initiate all of them in a loop...

Any suggestions on that would be appreciated.