Realmente necesito un localizada del calendario desplegable. Un calendario inglés no es exactamente comunicar la excelencia en la web noruega 😉

He experimentado con el jQuery DatePicker, en su sitio web dice que puede ser localizada, sin embargo, que no parece funcionar.

Estoy usando ASPNET.MVC, y realmente me quiere meter a una biblioteca de javascript. En este caso jQuery.

El ajax toolkit calendario sería aceptable, si sólo se permitiría mostrar noruego nombres.

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

  • Echa un vistazo este demo. La fuente da un buen ejemplo de cómo hacerlo.
InformationsquelleAutor Thomas Eyde | 2009-01-30

10 Comentarios

  1. 179

    Para aquellos que todavía tiene problemas, usted tiene que descargar el archivo de idioma en el que quiere desde aquí:

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

    y, a continuación, incluir en su página como esta por ejemplo(idioma italiano):

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

    a continuación, utilizar zilverdistel del código 😀

  2. 76

    Me di cuenta de la demo y aplicado de la siguiente manera:

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

    Necesitaba para establecer el valor predeterminado para el dateformat demasiado …

    • esto funcionó para mí: $.datepicker.setDefaults($.datepicker.regional["uk"]);
  3. 21

    La cadena $.datepicker.regional['it'] no traducir 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 datepicker es traducida correctamente.

    • Esta respuesta muestra cómo agregar la localización directamente, sin importar las bibliotecas. Este es el método que yo necesitaba, porque yo estoy utilizando jQuery $.getScript() a buscar a la biblioteca principal en Google hosted API.
  4. 10
      $.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: "年"
      });

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

  5. 7

    1. Usted necesita para cargar la interfaz de usuario jQuery archivos i18n:

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

    2. Uso $.datepicker.setDefaults función para configurar los valores predeterminados para TODOS los datepickers.

    3. En caso de que usted desea anular la configuración de la(s) antes de configurar los valores predeterminados puede utilizar este:

    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 porque de la manera jQuery.ampliar 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"]);
  6. 5

    Aquí es un ejemplo de cómo se puede hacer de localización sin algún extra de la biblioteca.

    JS:

    jQuery(function($) {
      $('input.datetimepicker').datepicker({
        duration: '',
        changeMonth: false,
        changeYear: false,
        yearRange: '2010:2020',
        showTime: false,
        time24h: true
      });
    
      $.datepicker.regional['cs'] = {
        closeText: 'Zavřít',
        prevText: '&#x3c;Dříve',
        nextText: 'Později&#x3e;',
        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']);
    });

    HTML:

    <!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link data-require="[email protected]*" 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="[email protected]*" 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>

    • Gracias Marek, a mí me funcionó
  7. 4

    Si utiliza jQuery UI del selector de fecha y moment.js en el mismo proyecto, se debe aprovechar de moment.js’s de la configuración regional de datos:

    //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']);
  8. 2

    sólo en caso de que alguien TODAVÍA está atascado en esto, a pesar de las otras respuestas, he resuelto con esto:

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

    nota extra ‘GB’. Después de que funcionaba bien.

  9. 0

    Esta solución puede ayudar.

    JS:

    $(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);
    });

    CSS:

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

    HTML:

    <!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>

  10. 0
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src=">/js/datepicker-fr.js"></script>
    <script>
    jQuery(function() {
    jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
    });
    
    </script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('#datepicker').datepicker($.datepicker.regional['fr']);
    });
    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here