simple only noweekends custom javascript jquery-ui localization calendar jquery-ui-datepicker

javascript - noweekends - jquery ui only datepicker



¿Cómo localizo jQuery UI Datepicker? (9)

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>

Realmente necesito un calendario desplegable localizado. Un calendario en inglés no comunica exactamente la excelencia en un sitio web noruego ;-)

He experimentado con jQuery DatePicker , su sitio web dice que puede ser localizado, sin embargo, eso no parece funcionar.

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

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

Actualización: ¡Impresionante! Veo que me faltan los archivos de idioma, un detalle no tan pequeño :-)

Descubrí la demostración y la implementé de la siguiente manera:

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

Necesitaba establecer el valor predeterminado para el formato de fecha también ...

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>

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

Para traducir el datepicker 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 marcador de fecha está debidamente traducido.

Para aquellos que todavía tienen problemas, debes descargar el archivo de idioma que deseas desde aquí:

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

y luego incluirlo en su página como este por ejemplo (idioma italiano):

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

luego usa el código de zilverdistel : D

Si usa datepicker y moment.js de jQuery UI en el mismo proyecto, debe aprovechar los datos de locale de momento.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'']);

solo en caso de que alguien TODAVÍA esté atascado en esto, a pesar de las otras respuestas, lo resolví con:

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

tenga en cuenta el extra ''GB''. Después de eso funcionó bien.

1. Debe cargar los archivos jQuery UI i18n:

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

2. Use la función $.datepicker.setDefaults para establecer los valores predeterminados para TODOS los selectores de fecha.

3. En caso de que desee anular la (s) configuración (es) antes de establecer los valores predeterminados, puede usar 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 en que funciona jQuery.extend . 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"]);

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

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