jQuery UI Datepicker - Month name in dropdown with Arabic locale

Question

I have an HTML input element for my datepicker and normal setup to support RTL.

$( "#datepicker" ).datepicker({
    isRTL:true,
    changeMonth: true,
    changeYear: true
});

Demo Fiddle

JS reference included on page to support Arabic Localisation Arabic Locale

Problem Area - Month dropdown values are coming as numeric digits i.e. 1, 2 .. 12

Expected Behavior - Month dropdown should display month name that too translated to Arabic.

In normal localisation, month name always renders as text i.e. Jan, Feb & so on. http://jsfiddle.net/ylokesh/hnu0r78y/2/

Seems like it's default behavior of datepicker. Please suggest if there is any get month names displayed in dropdown.

Answer 1

Month drop down takes value from monthNamesShort You need to update monthNamesShort with Arabic month name instead of numeric digits 1..12 Put following code above your datepicker.

Check this http://jsfiddle.net/hnu0r78y/5/

monthNamesShort: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
    'تموز', 'آب', 'أيلول',  'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],

Answer 2

This question is the top result when looking for an arabic traduction for the jquery datepicker, so here is the full traduction for those who need it :

    datepicker.regional.ma = {
    monthNames: ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونية',
        'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
    monthNamesShort: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
        'تموز', 'آب', 'أيلول',  'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
    dayNames:  ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
    dayNamesShort: ['أحد', 'اثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'],
    dayNamesMin: ['أحد', 'اثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'],
    prevText: '<السابق', prevStatus: 'عرض الشهر السابق',
    prevJumpText: '<<', prevJumpStatus: '',
    nextText: 'التالي>', nextStatus: 'عرض الشهر القادم',
    nextJumpText: '>>', nextJumpStatus: '',
    currentText: 'اليوم', currentStatus: 'عرض الشهر الحالي',
    todayText: 'اليوم', todayStatus: 'عرض الشهر الحالي',
    clearText: 'مسح', clearStatus: 'امسح التاريخ الحالي',
    closeText: 'إغلاق', closeStatus: 'إغلاق بدون حفظ',
    yearStatus: 'عرض سنة آخرى', monthStatus: 'عرض شهر آخر',
    weekText: 'أسبوع', weekStatus: 'أسبوع السنة',
    dayStatus: 'اختر D, M d', defaultStatus: 'اختر يوم',
    weekHeader: "Sem.",
    dateFormat: "dd/mm/yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "" };