Datepicker en español y versión: yyyy-mm-dd

publicado por: Anonymous

Tengo este Datepicker para fecha de entrada y fecha de salida.

Deseo convertir la versión “11/24/2017” en “2017/11/24” y cambiar idioma a español.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
        <script src="http://momentjs.com/downloads/moment.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
        $(function() {
            $("#check_in").datepicker({ dateFormat: 'yy/mm/dd' });
            $("#check_out").datepicker({ dateFormat: 'yy/mm/dd' });
            $("#check_in").datepicker({
                onSelect: function(dateStr) {
                    var minDate = $(this).datepicker('getDate');
                    if (minDate) { 
                        minDate.setDate(minDate.getDate() + 1);
                    }
                    $('#check_out').datepicker('setDate', minDate).datepicker('option', 'minDate', minDate);
                }
            });
            $('#check_out').datepicker().on("input click", function(e) {
                console.log("Fecha salida cambiada: ", e.target.value);
            });
        });
        </script>
    </head>
    <body>
        <form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mibusqueda" id="mibusqueda" method="POST">
            <label for="check_in">Entrada:</label>
            <input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">

            <label for="check_out">Salida:</label>
            <input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>">
        </form>
    </body>
</html>

solución

El datepicker tiene un método setDefaults a través del cual le puedes indicar los textos a mostrar, formato de fechas, etc…

_x000D_

_x000D_

$(function() {_x000D_
      var defaults = {_x000D_
        closeText: 'Cerrar',_x000D_
        prevText: '<Ant',_x000D_
        nextText: 'Sig>',_x000D_
        currentText: 'Hoy',_x000D_
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],_x000D_
        monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],_x000D_
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],_x000D_
        dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],_x000D_
        dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],_x000D_
        weekHeader: 'Sm',_x000D_
        dateFormat: 'yy/mm/dd',_x000D_
        firstDay: 1,_x000D_
        isRTL: false,_x000D_
        showMonthAfterYear: false,_x000D_
        yearSuffix: ''_x000D_
    };_x000D_
    $.datepicker.setDefaults(defaults);_x000D_
  _x000D_
      $("#check_in").datepicker({_x000D_
          onSelect: function(dateStr) {_x000D_
              var minDate = $(this).datepicker('getDate');_x000D_
              if (minDate) { _x000D_
                  minDate.setDate(minDate.getDate() + 1);_x000D_
              }_x000D_
              $('#check_out').datepicker('setDate', minDate)._x000D_
              datepicker('option', 'minDate', minDate);_x000D_
          }_x000D_
      });_x000D_
_x000D_
      $('#check_out').datepicker().on("input click", function(e) {_x000D_
          console.log("Fecha salida cambiada: ", e.target.value);_x000D_
      });_x000D_
  });

_x000D_

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">_x000D_
<script src="http://momentjs.com/downloads/moment.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
_x000D_
<form action="" name="mibusqueda" id="mibusqueda" method="POST">_x000D_
    <label for="check_in">Entrada:</label>_x000D_
    <input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in">_x000D_
_x000D_
    <label for="check_out">Salida:</label>_x000D_
    <input type="text" placeholder="Fecha de salida" name="check_out" onchange="calculoNoches();" id="check_out">_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *