We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143749 Apr 3,2019 08:23 PM UTC Apr 8,2019 01:56 PM UTC ASP.NET MVC - EJ 2 5
loading
Tags: DatePicker
Richard Werning
Asked On April 3, 2019 08:23 PM UTC

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 [Syncfusion]
Replied On April 4, 2019 05:55 PM UTC

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. 
 
  
Please check the above sample and revert us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Richard Werning
Replied On April 4, 2019 07:34 PM UTC

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 [Syncfusion]
Replied On April 5, 2019 12:07 PM UTC

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. 
 
 
Please check and let us know, if you have any concerns. 
 
Regards, 
Ashokkumar B. 


Richard Werning
Replied On April 5, 2019 01:57 PM UTC

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 [Syncfusion]
Replied On April 8, 2019 01:56 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon