Datepicker Input Text Field Issue 1

Datepicker Input Text Field Issue 1

Datepicker Input Text Field Issue 1:

Note : This post is similar to one I had posted 11 days ago, but it differs slightly due to requirement changes and as a result messed with the behavior.

I am having trouble with the JQuery datepicker control, because it’s triggered off of a text input field.

Important Note: User needs the ability to manually enter the date.

Technologies used in this issue:

·           ASP.NET using the 3.5 .NET Framework

·         C#

·         jQuery JavaScript Library v1.10.2

·         jQuery UI - v1.10.4

·         All css and image files associated with the smoothness jQuery UI theme

Basically what’s happening is:

  • 1.     User navigates to text field
  • 2.     JQuery Calendar control triggers and pops-up as expected
  • 3.     User decides to manually enter the date and not use the control
  • 4.     Upon clicking/tabbing out of the field validation logic triggers and displays a message beck to the user
  • 5.     User clicks okay to message and the focus is properly set back to the input field with the incorrect data still in the text field
  • 6.     The Problem: User can now click or tab out of the text field with the bad data and no validation fires because there wasn’t a change made via the calendar ctrl

 What I want to do is:

After applying focus back to the field with the bad data I would like to fire off validation again if the user simply tabs or clicks outside of the field.

 What I’ve tried:

Using the “blur” function on the saDate text field, but fails because it conflicts with the datapicker control.

 Current Logic:

   <input type="text" name="saDate" id="saDate" />


                    $(function() {



                                dateFormat: 'mm/dd/yy',

                                monthNamesShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

                                changeMonth: true,

                                changeYear: true,

                                yearRange: '-1:+0'


                        ).on("change", function() {

                            if (!strategicAdjustmentDateValidation(this)) {

                                setTimeout(function() { $("#saDate").focus(); }, 0);


                            var saDate = $(this).val();