How to set 2 digit year to previous year, not future?

[Richard Werning]

When using a datepicker to enter a date in the past, such as someones birth date, it's much easier to just type the value instead of using the calendar component and scrolling back many years. 

1. If a user types in a 2 digit year such as 1/1/78, the picker will change the year to current - so it becomes 2078.  This is an issue because it's in the future
2. If they enter something such as 1/1/10 it uses the current century and make it as 1/1/2010, this is ok as it's still in the past.

Is there a way that I set the picker so that if the user enters a 2 digit year and the current century makes it into the future, it goes into the previous century. But if the current century allows it to be in the past, then use current century.  We wouldn't want 1/1/10 to become 1/1/1910.

Thank you,

Rich 

[Ashokkumar Balasubramanian]

Hi Richard, 

 

We have checked with your query and while entering the two-digit year value it will be changed in to the current century year. This is the default behavior of the DatePicker component. For your requirement, we have used our DatePicker component change event to achieve it. Please check the below sample. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker_twodigit-2069284401 

  

Please check the above sample and revert us if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[Richard Werning]

Thank you for the sample, that gets me close. However there are a couple issues with your demo.

1. The onChange event fires before the listener does, so the code in the listener doesn't actually do anything. I added console.log messages to display it.
2. The reason the onChange event code works is due to the fact that the length variable is undefined first time through. Once a valid date has been entered, any future runs won't actually do the 2 digit year processing in the onChange event.
3. Because of 1 & 2, if the user enters a 4 digit year that is in the future (2030) the picker will change the date to 1930. 
4. The listener code that checks for length fails when there is a previous value and the user manually deletes it, as the split array has no element 3.
5. The fix I added for #2 is irrelevant due to #1. 

I can't find a way to intercept the value that the user entered, before the picker component changes the year to a 4 digit. Without that, I believe that there's really no way of being able to implement this correctly.

I modified the demo code you provided to show this happening.  I'm running in Chrome browser, using the debugger tools (F12).

    var inputLength;

    document.getElementById("datepicker").addEventListener("change", function () {

        var dateObj = document.getElementById("datepicker").ej2_instances[0];

        console.log("listener: " + dateObj.element.value); // this needs to happen prior to onChange event

        // manual delete of the data, then tabbing out causes error to toss here, 3rd element in array doesn't exist

        //inputLength = dateObj.element.value.split("/")[2].length; // This operation based on the default date format "MM/dd/yyyy"

        var valSplit = dateObj.element.value.split("/");

        inputLength = valSplit.length === 3 ? valSplit[2].length : 0;

    });

    function onDatechange(args) {

        var datepicker = document.getElementById("datepicker").ej2_instances[0]; // Get the datepicker instance

        var currentYear = new Date().getFullYear();

        console.log("event: " + datepicker.element.value); // DataChange occurs before Listener does

        if ((args.value) && (inputLength != 4)) {

            if (args.value.getFullYear() > currentYear) {

                let year = args.value.getFullYear();

                let month = args.value.getMonth();

                let day = args.value.getDate();

                datepicker.value = new Date(year - 100, month, day);

            }

        } 

        else {

            datepicker.value = args.value;

        }

    }

[Ashokkumar Balasubramanian]

Hi Richard, 

 

We have modified our previously provided solution to achieve your requirement based on change the date value by manually or pressing tab or enter key. Please check the below sample. 

 

http://www.syncfusion.com/downloads/support/forum/143749/ze/DatePicker_twodigit_(2)704212561 

 

Please check and let us know, if you have any concerns. 

 

Regards, 

Ashokkumar B. 

[Richard Werning]

Thank you for the prompt response. There were a few issues with your sample, but it did help me get the picker working the way I would expect it to. 

1. Changed listener from keydown to keyup
2. Added check for setting the length if the key pressed is 0-9
3. Fixed the check in dateValue to remove the error when trying to access split[2] when it doesn't exist on tab/enter 
4. Removed the change event listener, as it really doesn't do anything

final result looks like:

    var inputLength;

    document.getElementById('datepicker').addEventListener('keyup',

        function (e) {

            if ((e.key >= "0" && e.key <= "9") || e.keyCode === 13 || e.keyCode === 9) { // code for tab and enter key

                dateValue();

            }

        });

    function dateValue() {

        var valSplit = document.getElementById('datepicker').ej2_instances[0].element.value.split("/");

        inputLength = valSplit.length === 3 ? valSplit[2].length : 0; // This operation based on the default format "MM/dd/yyyy"

    };

    function onDateChange(args) {

        var datepicker = document.getElementById("datepicker").ej2_instances[0]; // Get the datepicker instance

        var currentYear = new Date().getFullYear();

        if ((args.value) && (inputLength != 4)) {

            if (args.value.getFullYear() > currentYear) {

                let year = args.value.getFullYear();

                let month = args.value.getMonth();

                let day = args.value.getDate();

                datepicker.value = new Date(year - 100, month, day);

            }

        } else {

            datepicker.value = args.value;

        }

    }

[Vinoth Kumar Sundara Moorthy]

Hi Richard, 

Thank you for your update. 

We would like to let you know that in our current behavior of DatePicker, change event will be fired before keyup event. Due to this behavior we have suggested you to use the “keydown” event to achieve your requirement in our previous update. Could you please get back to us if you need any further assistance on this? 

Regards, 

Vinoth Kumar S