2

Buenos dias, estoy realizando un formulario en el que tiene que rellenar varios campos, entre ellos, un calendario para elegir fecha. Para ello uso DatetimePicker. Consigo que el calendario funcione, pero no logro cambiarle el idioma (he probado cambiando el orden de las llamadas de las librerias necesarias a ver si es problema de eso pero sigo igual). Adjunto mi codigo:

      $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
          format: 'mm/dd/yyyy',
          container: container,
          todayHighlight: true,
          autoclose: true,
          locale: 'es'
    
        })
      })
    <head>
      <title></title>
    <!-- AÑADIDO -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src='js_propio/cookies.js'></script>
      <script src='js_propio/funciones.js'></script>
      <script src='js_propio/eventos.js'></script>
    
     
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <link rel="stylesheet" type="text/css" href="assets/css/vendor.css">
      <link rel="stylesheet" type="text/css" href="assets/css/flat-admin.css">
    
      <!-- Theme -->
      <link rel="stylesheet" type="text/css" href="assets/css/theme/blue-sky.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/blue.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/red.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/yellow.css">
    
    </head>
    <body>
    <div class="row" id="datosCita">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              Rellene los siguientes datos
            </div>
            <div class="card-body">
              <div class="row"> 
                <div  id="datos">
                  <select class="select2" id="listEspec">
                    <option value="0">-- Seleccione una especialidad --</option>
                  </select>
                </div>
                <div id="profesionales">
                  <select class="select2" id="listProf">
                    <option value="0">-- Seleccione un profesional --</option>
                  </select>
                </div>
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input class="form-control" id="date" name="date" placeholder="DD/MM/YYYY" type="text"/>
                </div>
              </div>     
              
            </div>
          </div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-footer">
            <div class="form-group">
              <div class="col-md-9 col-md-offset-3">
                <button type="submit" class="btn btn-primary">Confirmar cita</button>
                <button type="button" class="btn btn-default">Cancelar</button>
              </div>
            </div>
          </div>
        </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
      </div>
      
      <script type="text/javascript" src="assets/js/vendor.js"></script>
      <script type="text/javascript" src="assets/js/app.js"></script>
       <script src='js_propio/cookies.js'></script>
    
    <!-- Include Date Range Picker -->
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/bootstrap-datetimepicker.es.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
    

Agradecería cualquier ayuda que me pudieran dar. Muchas gracias.

2
  • Muchas gracias, ese error me traía de cabeza. Ya lo tengo funcionando a la perfección. el 2 may. 2017 a las 11:08
  • de nada y para que le llegue la notificación a otro de un comentario tienes q etiquetas con @ o comentando en la respuesta de X usuario.
    – bypabloc_
    el 2 may. 2017 a las 19:24

1 respuesta 1

3

El error esta en donde defines el lenguaje (error de sintaxis):

Antes: locale

Ahora: language

Demostración:

$(document).ready(function(){
  var date_input=$('input[name="date"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    language: 'es'

  })
})
<head>
      <title></title>
    <!-- AÑADIDO -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src='js_propio/cookies.js'></script>
      <script src='js_propio/funciones.js'></script>
      <script src='js_propio/eventos.js'></script>
    
     
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <link rel="stylesheet" type="text/css" href="assets/css/vendor.css">
      <link rel="stylesheet" type="text/css" href="assets/css/flat-admin.css">
    
      <!-- Theme -->
      <link rel="stylesheet" type="text/css" href="assets/css/theme/blue-sky.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/blue.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/red.css">
      <link rel="stylesheet" type="text/css" href="assets/css/theme/yellow.css">
    
    </head>
    <body>
    <div class="row" id="datosCita">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              Rellene los siguientes datos
            </div>
            <div class="card-body">
              <div class="row"> 
                <div  id="datos">
                  <select class="select2" id="listEspec">
                    <option value="0">-- Seleccione una especialidad --</option>
                  </select>
                </div>
                <div id="profesionales">
                  <select class="select2" id="listProf">
                    <option value="0">-- Seleccione un profesional --</option>
                  </select>
                </div>
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input class="form-control" id="date" name="date" placeholder="DD/MM/YYYY" type="text"/>
                </div>
              </div>     
              
            </div>
          </div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-footer">
            <div class="form-group">
              <div class="col-md-9 col-md-offset-3">
                <button type="submit" class="btn btn-primary">Confirmar cita</button>
                <button type="button" class="btn btn-default">Cancelar</button>
              </div>
            </div>
          </div>
        </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
      </div>
      
      <script type="text/javascript" src="assets/js/vendor.js"></script>
      <script type="text/javascript" src="assets/js/app.js"></script>
       <script src='js_propio/cookies.js'></script>
    
    <!-- Include Date Range Picker -->
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.es.min.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
    

NOTA: en la documentación cuando seleccionas el lenguaje "es" abajo aparece como debe ser indicado el idioma que hayas seleccionado.

2
  • algo leí tambien que el <script src="js/moment.min.js"></script> deberia ser moment-with-locales.min.js para locale, pero si con language funciona, perfect ^^
    – lois6b
    el 2 may. 2017 a las 9:29
  • @lois6b creo que aplicar es para el de eonasdan.
    – bypabloc_
    el 2 may. 2017 a las 19:23

Tu Respuesta

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

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