¿Cómo localizo jQuery UI Datepicker?

Question

Realmente necesito un calendario desplegable localizado. Un calendario de Inglés no se comunica con exactitud la excelencia en un sitio web noruega ;-)

he experimentado con la jQuery DatePicker, su página web dice que puede ser localizada, sin embargo, que no parece funcionar.

Estoy usando ASPNET.MVC, y realmente quiero apegarme a una biblioteca javascript. En este caso jQuery.

El calendario del juego de herramientas ajax sería aceptable, si solo también mostraría nombres noruegos.

Actualización: ¡Impresionante! Veo que me falta los archivos de idioma, un detalle no tan menor :-)

Answer 1

me di cuenta de la demo e implementado de la siguiente manera:

$.datepicker.setDefaults(
    $.extend(
    {'dateFormat':'dd-mm-yy'}, 
    $.datepicker.regional['nl'] 
) 
); 

que necesitaba para establecer el valor predeterminado para la dateformat también ...

Answer 2

para aquellos que todavía tiene problemas, usted tiene que descargar el archivo de lenguaje de su falta de aquí:

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

y luego incluirlo en su página como esta, por ejemplo, (lengua italiana):

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script> 

a continuación, utilizar zilverdistel's code: D

Answer 3

1. Es necesario para cargar los archivos i18n jQuery UI :

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"> 
</script> 

2. uso $.datepicker.setDefaults función para establecer los valores predeterminados para TODOS los buscadores de fecha.

3. En caso de que desee anular la configuración (s) antes de la configuración de ajustes que puede utilizar esto:

var options = $.extend(
    {},         // empty object 
    $.datepicker.regional["fr"],   // fr regional 
    { dateFormat: "d MM, y" /*, ... */ } // your custom options 
); 
$.datepicker.setDefaults(options); 

El orden de los parámetros es importante debido a la forma jQuery.extend obras. Dos ejemplos incorrectos:

/* 
* This overwrites the global variable itself instead of creating a 
* customized copy of french regional settings 
*/ 
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"}); 

/* 
* The desired dateFormat is overwritten by french regional 
* settings' date format 
*/ 
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]); 

Answer 4

La cadena $.datepicker.regional['it'] no se traducen todas las palabras.

Para traducir el selector de fecha se debe especificar algunas variables:

$.datepicker.regional['it'] = { 
    closeText: 'Chiudi', // set a close button text 
    currentText: 'Oggi', // set today text 
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno', 'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names 
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names 
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names 
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names 
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names 
    dateFormat: 'dd/mm/yy' // set format date 
}; 

$.datepicker.setDefaults($.datepicker.regional['it']); 

$(".datepicker").datepicker(); 

En este caso, su planificador de evento es traducido correctamente.

Answer 5

Aquí hay un ejemplo de cómo puede hacer la localización sin una biblioteca adicional.

jQuery(function($) { 
 
    $('input.datetimepicker').datepicker({ 
 
    duration: '', 
 
    changeMonth: false, 
 
    changeYear: false, 
 
    yearRange: '2010:2020', 
 
    showTime: false, 
 
    time24h: true 
 
    }); 
 

 
    $.datepicker.regional['cs'] = { 
 
    closeText: 'Zavřít', 
 
    prevText: '<Dříve', 
 
    nextText: 'Později>', 
 
    currentText: 'Nyní', 
 
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 
 
     'září', 'říjen', 'listopad', 'prosinec' 
 
    ], 
 
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'], 
 
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'], 
 
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'], 
 
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'], 
 
    weekHeader: 'Týd', 
 
    dateFormat: 'dd/mm/yy', 
 
    firstDay: 1, 
 
    isRTL: false, 
 
    showMonthAfterYear: false, 
 
    yearSuffix: '' 
 
    }; 
 

 
    $.datepicker.setDefaults($.datepicker.regional['cs']); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 
    <script src="datepicker-cs.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     console.log("test"); 
 
     $("#test").datepicker({ 
 
     dateFormat: "dd.m.yy", 
 
     minDate: 0, 
 
     showOtherMonths: true, 
 
     firstDay: 1 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Here is your datepicker</h1> 
 
    <input id="test" type="text" /> 
 
</body> 
 
</html>

Answer 6

$.datepicker.setDefaults({ 
    closeText: "关闭", 
    prevText: "<上月", 
    nextText: "下月>", 
    currentText: "今天", 
    monthNames: [ "一月","二月","三月","四月","五月","六月", 
    "七月","八月","九月","十月","十一月","十二月" ], 
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月", 
    "七月","八月","九月","十月","十一月","十二月" ], 
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ], 
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ], 
    dayNamesMin: [ "日","一","二","三","四","五","六" ], 
    weekHeader: "周", 
    dateFormat: "yy-mm-dd", 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: "年" 
    }); 

el código i18n podría ser copiada de https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Answer 7

por si alguien se ha quedado atascado TODAVÍA en esto, a pesar de las otras respuestas, he resuelto esto con:

$.datepicker.setDefaults($.datepicker.regional['en-GB']); 

tenga en cuenta la e xtra 'GB'. Después de eso funcionó bien.

Answer 8

Si utiliza selector de fechas y moment.js de jQuery UI en el mismo proyecto, se debe a cuestas fuera de los datos de la configuración regional del moment.js:

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale 
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI 
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = { 
    monthNames: momentLocaleData._months, 
    monthNamesShort: momentLocaleData._monthsShort, 
    dayNames: momentLocaleData._weekdays, 
    dayNamesShort: momentLocaleData._weekdaysMin, 
    dayNamesMin: momentLocaleData._weekdaysMin, 
    firstDay: momentLocaleData._week.dow, 
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890) 
}; 

$.datepicker.setDefaults($.datepicker.regional['user']); 

Answer 9

Esta solución puede ayudar.

$(document).ready(function() { 
 
    var userLang = navigator.language || navigator.userLanguage; 
 

 
    var options = $.extend({}, 
 
    $.datepicker.regional["ja"], { 
 
     dateFormat: "yy/mm/dd", 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     highlightWeek: true 
 
    } 
 
); 
 

 
    $("#japaneseCalendar").datepicker(options); 
 
});

#ui-datepicker-div { 
 
    font-size: 14px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" 
 
      href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
 
</head> 
 
<body> 
 
<h3>Japanese JQuery UI Datepicker</h3> 
 
<input type="text" id="japaneseCalendar"/> 
 

 
</body> 
 
</html>