Localization for Date Range Picker

Question

I'm very new to javascript and jquery. I've been searching up and down for a solution to this, but I'm getting nowhere. I'm using the daterangepicker from http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/.

This was a suggested solution in the comments:

$("input").daterangepicker({
 dateFormat:"MM dd yyyy”,
 datepickerOptions: $j.extend({},
  $j.datepicker.regional[’de’], { //germany
  showStatus: true, //this is just a datepicker option
  showOn: “both”,//this is just a datepicker option
  changeYear :true//this is just a datepicker option
})
}); 

I tried the above approach, but go nowhere. I'm quite noob to javascript, so bear with me.

parent.$('#start_date_<?php echo $widget_id;?>').daterangepicker({
        monthOnly: true,
        arrows:false,
        dateFormat: 'MM yy',
        latestDate: '<?php echo date('Y-m-d');?>',
        presetRanges: [
            {text:'<?php echo lang('dashboards_month_to_date');?>', dateStart: 'm2d', dateEnd: 'today' },
            {text: '<?php echo lang('dashboards_quarter_to_date');?>', dateStart: 'q2d', dateEnd: 'today' },
            {text: '<?php echo lang('dashboards_year_to_date');?>', dateStart: 'y2d', dateEnd: 'today' }
        ],
        presets: {
            allDatesAfter: '<?php echo lang('dashboards_all_dates_from_first');?>'
        },
        altFields:'widgetDate_<?php echo $widget_id;?>',
        datepickerOptions: {
            changeMonth: true,
            changeYear: true,
            maxDate: Date.today()
        },
    });
    parent.$('#widgetDate_<?php echo $widget_id;?>S').val('<?php echo $options->widgetStartDate;?>');
},10);
{/eval}

Say I need to do a localization for french, can someone give me step-by-step guide to do this for the above code. Any help will be greatly appreciated.

Answer 1

You can use the daterangepicker options.

this is the italian localization:

$('#inputPeriodo').daterangepicker({
    presetRanges: [
                    { text: 'oggi', dateStart: 'today', dateEnd: 'today' },
                    { text: 'ieri', dateStart: 'today-1days', dateEnd: 'today-1days' },
                    { text: 'ultimi 7 giorni', dateStart: 'today-7days', dateEnd: 'today' } ],
    presets: {
        specificDate: 'giorno specifico',
        allDatesBefore: 'prima del',
        allDatesAfter: 'dopo il',
        dateRange: 'intervallo'
    },
    rangeStartTitle: 'data inizio',
    rangeEndTitle: 'data fine',
    nextLinkText: 'mese successivo',
    prevLinkText: 'mese precedente',
    doneButtonText: 'fatto',
    dateFormat: 'dd/mm/yy', 
    datepickerOptions: {
        prevText: '<Prec',
        nextText: 'Succ>',
        monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
            'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
        monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
            'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
        dayNames: ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa']
    }
});