Datepicker Input Text Field Issue 2

Datepicker Input Text Field Issue 2

Datepicker Input Text Field Issue 2:

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 manually enters a date with a 3 digit year by mistake and does not use the datepicker control. Ex: 01/01/201
  • 2.        Upon clicking/tabbing out of the field validation logic triggers and displays a message beck to the user
  • 3.        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
  • 4.        The Problem: User opts to use the datepicker ctrl to select a date, but only the month and day change. The 3 digit year does not update.

 What I want to do is:

Have the datepicker ctrl properly set the 4 digit years based on the user’s selection

 

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>