0

Tengo un problema con datepicker.

El datepicker no me muestra la fecha en español con la etiqueta <button> pero con la etiqueta <input type=submit> si, pero quiero poder poner la fecha en español con la etiqueta <button>.

Ya tengo añadidos los array para la fecha en español pero no los pone en español.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<script type="text/javascript">
$( function() {

      var espaniol = {
      closeText: 'Cerrar', 
      prevText: 'Previo', 
      nextText: 'Próximo',

      monthNames: ['de Enero','de Febrero','de Marzo','de Abril','de Mayo','de Junio', 'de Julio','de Agosto','de Septiembre','de Octubre','de Noviembre','de Diciembre'],
      monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 'Jul','Ago','Sep','Oct','Nov','Dic'],
      monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
      dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
      dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
      dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
      dateFormat: 'DD dd MM yy', firstDay: 0, 
      initStatus: 'Selecciona la fecha',
      isRTL: false
    };

      $.datepicker.setDefaults(espaniol);
      $( "#datepicker" ).datepicker();
      $('#ui-datepicker-div').css('clip', 'auto');


  $("#datepicker").on("change", function() {
    //Limpia el boton fecha 
    $('#boton-fecha').empty();
    //Captura la variable
    var fecha = $("#datepicker").datepicker("getDate");

    $("#boton-fecha").append(fecha);
  });
          //Click buttom fecha
          $("#boton-fecha").click(function() {
            $("#datepicker").datepicker("show");
          });
          //Click buttom

          //Click buttom Cambiar fecha
          $("#boton-cambiar-fecha").click(function() {
            $("#datepicker").datepicker("show");
          });
          //Click buttom
});
</script>

En esta primera etiqueta button es donde necesito poner la fecha en español con datepicker, no se por que me da la fecha en ingles

<button id="boton-fecha" >Miercoles<b>15</b>de abril</b><b>2020</b></button>
<input type="text" id="datepicker" />
<br>
<br>
<br>
<br>
<button id="boton-cambiar-fecha" >CAMBIAR FECHA</button>
1
  • Hola @jose bienvenido, por esta vez ya que la pregunta era lo suficientemente entendible he podido responder, pero no has hecho nada realmente para resolver el problema, solo has hecho append de la fecha directamente, recuerda siempre intentar resolver ya que acá no se responderán a menudo preguntas que no ofrezcan previa investigación, te dejo Como preguntar y Recorrido para que te nutras mas sobre stackoverflow, no te desanimes y un saludo, estamos para ayudarnos. Commented el 16 abr. 2020 a las 0:24

1 respuesta 1

0

Veo que tienes importado MomentJS, el problema es que no estas importando la librería correcta que es moment-with-locales.

Entonces la solución seria eliminar la linea donde importas moment y reemplazarla con la que si contiene los lenguajes, y luego formatear el string según como te convenga en la documentación de MomentJS.

Observa el ejemplo funcionando:

$( function() {

      var espaniol = {
      closeText: 'Cerrar', 
      prevText: 'Previo', 
      nextText: 'Próximo',

      monthNames: ['de Enero','de Febrero','de Marzo','de Abril','de Mayo','de Junio', 'de Julio','de Agosto','de Septiembre','de Octubre','de Noviembre','de Diciembre'],
      monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 'Jul','Ago','Sep','Oct','Nov','Dic'],
      monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
      dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
      dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
      dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
      dateFormat: 'DD dd MM yy', firstDay: 0, 
      initStatus: 'Selecciona la fecha',
      isRTL: false
    };

      $.datepicker.setDefaults(espaniol);
      $( "#datepicker" ).datepicker();
      $('#ui-datepicker-div').css('clip', 'auto');


  $("#datepicker").on("change", function() {
    //Limpia el boton fecha 
    $('#boton-fecha').empty();
    //Captura la variable
    var fecha = $("#datepicker").datepicker("getDate");
    // Configuramos el locale ---------------- >
    moment.locale('es');
    // Formateamos el string ----------------- >
    fecha = moment(fecha).format("LL")

    $("#boton-fecha").append(fecha);
  });
          //Click buttom fecha
          $("#boton-fecha").click(function() {
            $("#datepicker").datepicker("show");
          });
          //Click buttom

          //Click buttom Cambiar fecha
          $("#boton-cambiar-fecha").click(function() {
            $("#datepicker").datepicker("show");
          });
          //Click buttom
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<button id="boton-fecha" >Miercoles<b>15</b>de abril</b><b>2020</b></button>
<input type="text" id="datepicker" />
<br>
<br>
<br>
<br>
<button id="boton-cambiar-fecha" >CAMBIAR FECHA</button>

Espero que te sea de ayuda, un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.