two-digit year on datepicker

2019-08-16 16:34发布

问题:

How is this possible to select a two-digit year in ui-datepicker? When I try to select 24 year or 79 year It returns 1924 or 1979. How can I select the two-digit correctly?

Thanks.

回答1:

Provide date format argument: .datepicker({ dateFormat: 'dd-mm-y' }) (2 digit yeay = y, adjust rest of the format to your need)



回答2:

The Datepicker plugin has one specific option for such cases - shortYearCutoff:

shortYearCutoff

The cutoff year for determining the century for a date (used in conjunction with 'y' dateFormat). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.

Its default value is '+10' (ten years from the current one, so in 2012, '22' filled in will be transformed into '2022', but '23' ends up as '1923').

You can supply 99 (max value) when initializing your datepicker, like this:

$( ".selector" ).datepicker({ shortYearCutoff: 99 });

... to make all the two-number years belong to the current century.



回答3:

Datepicker is not very intuitive in this case.

Try this documentation:

http://api.jqueryui.com/1.8/datepicker/#option-dateFormat

Set the year-part of the date format to be only y instead of yy

$(selector).datepicker({ dateFormat: 'dd.mm.y' })

http://docs.jquery.com/UI/Datepicker/formatDate



回答4:

Adding the shortYearCutoff option did not do anything when the picker window is only activated via button (showOn: 'button'), a user manually enters a date with a 2-digit year, and a 4-digit year is desired.

I ended up attaching my own change event to the input field to handle date formatting, example code shown below.

It should also be noted that jquery validate is used and configured on the form that this input resides. The validation settings on the datepicker input are configured to enforce a date value. datepicker:{date: true} This combined with the datepicker dateFormat setting configured as "mm/dd/yy" ensure the custom onchange event code handling will reliably work.

//datepicker $( "#datepicker" ).attr("placeholder", "mm/dd/yyyy").change(function(){ // get the date value from the input field var d = $(this).val(); // get the last 4 characters of the date value entered var last4 = d.substr(-4); // determine if the last 4 characters contain the character: / if(last4.indexOf('/') > -1){ // yes there is a / character which means a two digit year was provided // store the last two digits from the input string var last2 = ((d.substr(-2))*1); // remove the last two digits from the input string d = d.slice(0,(d.length-2)); // prepend a 19 or 20 to the two digit year given based on a cutOff of 30 if(last2<=30){ d = d+'20'+last2; }else{ d = d+'19'+last2; } } // store/display the properly formated date d = $.datepicker.parseDate('mm/dd/yy', d); $(this).datepicker('setDate', d); }).datepicker({ dateFormat: "mm/dd/yy", shortYearCutoff: 30, buttonImage: 'images/calendar_icon.png', showOn: 'button'
});

Input values | onchange output results
--------------------------------------
07/04/2000   | 07/04/2000 (no change)
7/4/2000     | 07/04/2000
07/04/00     | 07/04/2000
07/4/00      | 07/04/2000
7/4/00       | 07/04/2000
7/4/30       | 07/04/2030
7/4/31       | 07/04/1931
07/04/2031   | 07/04/2031 (no change)
07/04/1931   | 07/04/1931 (no change)


回答5:

doesn't work with the 2 digits from the 2000's like '09' becomes '9' then the year registrated is '209'

this code handles it :

// get the date value from the input field
var d = $(this).val();
// get the last 4 characters of the date value entered
var last4 = d.substr(-4);
// determine if the last 4 characters contain the character: /
if (last4.indexOf('/') > -1) {
  // yes there is a / character which means a two digit year was provided
  // store the last two digits from the input string
  var last2 = ((d.substr(-2)) * 1);
  // remove the last two digits from the input string
  d = d.slice(0, (d.length - 2));
  // prepend a 19 or 20 to the two digit year given based on a cutOff
  // of 30
  if (last2 <= 30) {
    if (last2 < 10) {
      d = d + '200' + last2;
    } else {
      d = d + '20' + last2;
    }
  } else {
    if (last2 < 10) {
      d = d + '190' + last2;
    } else {
      d = d + '19' + last2;
    }
  }
}


回答6:

Modified code above to basicly scale based on the current date to use the year that is closest to the current year and handle 1 digit years and ignore 3 digits for the year:

.on("change",function(){
                    var d = $(this).val();
                    var last3 = d.substr(-3);
                    // determine if the last 3 characters contain the character: /
                    if(last3.indexOf('/') > -1){
                        var currentYearStr=(new Date()).getFullYear().toString();
                        var currentCentury=(currentYearStr.substr(0,2)*1);
                        var last2 = (d.substr(-2));
                        // determine if the last 2 characters contain the character: /
                        if(last2.indexOf('/') > -1) {
                            // determine which century, within 50 years of the current year, to prepend and prepend that and decade 0 to the 1 digit year:
                            var last = (d.substr(-1)*1);
                            var yeardiff=(currentYearStr.substr(-2)*1)-last;
                            if (yeardiff>50) currentCentury++;
                            d = d.slice(0,(d.length-1));
                            d = d+currentCentury.toString()+'0'+last;
                        } else {
                            // determine which century, within 50 years of the current year, to prepend and prepend that to the 2-digit year:
                            last2=last2*1;
                            var yeardiff=(currentYearStr.substr(-2)*1)-last2;
                            if (yeardiff>50) currentCentury++;
                            else if (yeardiff<-50) currentCentury--;
                            d = d.slice(0,(d.length-2));
                            d = d+currentCentury.toString()+last2;
                        }
                        // store/display the properly formated date
                        d = $.datepicker.parseDate('mm/dd/yy', d);
                        $(this).datepicker('setDate', d);
                    }
                });


回答7:

Put that in your datepicker initialization

"dateFormat": "yy-mm-dd"