Search code examples
javascriptdatetimepicker

Capitalize First Letter of the month in Datetimepicker language: nl(netherlands) not with css


Any solution except for the style/css solution. I try to use the .change() but when i clicked outside the inputbox it will return to the current date. the text-transform: capitalize solution is not preferable for me because in the email sent, it will return to lowercase. Also, the nl(netherland) language only the problem, other language are fine.

Here's the sample code in Codepen

$.datetimepicker.setLocale('nl');
        $( 'input' ).datetimepicker({
            timepicker:false,
            format:'F d, Y',
            maxDate: '0',
            i18n: {
                nl: {
                    months: [
                        "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"
                    ]
                }
            }
        }).keypress(function (e) {
            e.preventDefault();
        }).change(function(){
    var value = $('input').val();
    var capitalized = value[0].toUpperCase() + value.substr(1);

    $('input').val(capitalized);
  });

Solution

  • Instead of change use blur event of jQuery

    $.datetimepicker.setLocale('nl');
                $( 'input' ).datetimepicker({
                    timepicker:false,
                    format:'F d, Y',
                    maxDate: '0',
                    i18n: {
                        nl: {
                            months: [
                                "Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"
                            ]
                        }
                    }
                }).keypress(function (e) {
                    e.preventDefault();
                }).blur(function(){
            var value = $('input').val();
            var capitalized = value[0].toUpperCase() + value.substr(1);
    
            $('input').val(capitalized);
          }).change(function(){
        $(':focus').blur();
      });
    

    Here is the working Sample : CodePen