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" />

    <script>

                    $(function() {

                        $('#saDate').datepicker(

                            {

                                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();

                            $("#idStrategicAdjustmentDate").val(saDate);

                        });

                    });

    </script>