Start jQuery .datepicker vanuit Another JS Function

Ik moet .datepicker alleen starten als de tekst die is ingevoerd in een veld niet voldoet aan een reeks criteria. Maar ik kan er niet achter komen hoe ik .datepicker moet starten anders dan rechtstreeks vanuit een veld dat de focus krijgt of een knop die wordt ingedrukt.

Wat ik probeer te doen ...

De HTML

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

De 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;
    }
}

Ik weet het, dit zou gemakkelijker zijn als de kalender net opkwam toen het tekstveld focus kreeg. Maar dit is niet de manier waarop de klant wil dat het werkt. Ze willen de invoer van de gebruiker accepteren, zolang deze maar in hun gewenste formaat valt. Zo niet, dan willen ze de agenda en een standaard, geforceerde indeling.

Bedankt.

0
Ik zou adviseren om ook het onblur-evenement in jQuery te binden. in plaats van in html.
toegevoegd de auteur albertjan, de bron

2 antwoord

Als u de datepicker in de gebruikersinterface van jQuery gebruikt, geeft u de datepicker als volgt weer:

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

Bewerken

Uw code zou er waarschijnlijk als volgt uit moeten zien:

$(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;
    }
}
3
toegevoegd
@ user1084262 Zie mijn update-antwoord, je moet waarschijnlijk de datepicker aanmaken bij het laden.
toegevoegd de auteur Christofer Eliasson, de bron
Wanneer ik de bovenstaande code gebruik, krijg ik een bericht in de foutconsole waarin staat: "a is undefined in ( ajax.googleapis.com /...)& quot ;
toegevoegd de auteur seveninstl, de bron
Ik heb dat al geprobeerd. Het probleem met dat is wanneer het tekstveld eerst focus krijgt, de kalender verschijnt. Ik heb een manier nodig om dat te onderdrukken. Ik heb ook geprobeerd de datepicker te initialiseren als uitgeschakeld, maar dat heeft ook het invoerveld uitgeschakeld, niet alleen de pop-upkalender.
toegevoegd de auteur seveninstl, de bron

Oké, na veel blikjes Pepsi Max en nog meer uren onderzoek, vallen en opstaan; dit is wat ik bedacht heb ... en het voldoet aan mijn behoeften.

$(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');
            }
        });
    });

Het enige probleem nu is dat het formulier van de klant 14 datumvelden heeft. Dus ... kopieer deze 13 keer meer in mijn code !? Ik heb nu niet de tijd om een ​​manier te bedenken om dit allemaal in een enkele functie te rollen die ze allemaal in een lus zal initiëren ...

Alle suggesties hierover zouden op prijs worden gesteld.

0
toegevoegd