Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI datepicker: How to change the month names in the drop-down from short to long names?

I need to change the month names from short names to long names in my jQuery UI datepicker.

My properties are:

$.datepicker.regional['de'] = {
    prevText: '<zurück',
    nextText: 'vor>',
    monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
            'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
    monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
            'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    weekHeader: 'Wo',
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    yearRange: "-0:+2",
    isRTL: false,
    showMonthAfterYear: false,
    minDate: 0
 };

$.datepicker.setDefaults($.datepicker.regional['de']);
var dates = $("#von, #bis").datepicker({
    showOn: "button",
    buttonImage: "calendar.png",
    buttonImageOnly: true,
    buttonText: 'Datum w\u00E4hlen',
    onSelect: function (selectedDate) {
        var option = this.id == "#von" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

At the moment the calendar only shows short month names like "Apr" instead of "April" in the dropdown list.

Maybe I am overwriting the default long names with some piece of code?

Please help.

like image 848
Keith L. Avatar asked Apr 24 '12 08:04

Keith L.


People also ask

How can change date format in jQuery UI datepicker?

inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });

How do I style a datepicker calendar?

Right click on datepicker box. Select 'inspect' (Ctrl+Shift+I) in Chrome or 'inspect element' (Q) in Firefox. Find the CSS style that you want to change. Show activity on this post.

How do I set a datepicker range?

To set date range of one month from current date, we will use 'M' option to "+1" for maxDate and for minDate "0" So the current date becomes the value of minDate. See below jQuery code. $(document). ready(function(){ $("#txtDate").

What is minDate and maxDate in jQuery datepicker?

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI. Using this you can set the date range of the Datepicker. After defining these options the other days will be disabled which are not in a defined range.


2 Answers

Use the property monthNamesShort and attribute it the names you want.

In my case, I wanted to show, in the month drop-down, the month long name, in portuguese:

monthNamesShort: [ "Janeiro", "Fevereiro", "Março", "Abril",
                   "Maio", "Junho", "Julho", "Agosto", "Setembro",
                   "Outubro", "Novembro", "Dezembro" ]
like image 51
Bruno Arce Prado Avatar answered Oct 04 '22 05:10

Bruno Arce Prado


It's not possible at the moment. See https://github.com/jquery/jquery-ui/pull/590 for details.

like image 26
enumag Avatar answered Oct 01 '22 05:10

enumag