1

nuevamente preguntando sobre datepicker con Bootstrap Resulta que perfectamente aparece el calendario pero las opciones que le doy parece que a duras penas reconoce el formato. El resto lo pasa de largo y en especial necesito bloquear fechas anteriores a la que menciono. Gracias.

   <!doctype html>
<html lang="es">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

    <link rel="stylesheet" href="datePicker/css/bootstrap-datepicker.css">
    <script src="datePicker/js/bootstrap-datepicker.min.js"></script>
    <script src="datePicker/locales/bootstrap-datepicker.es.min.js"></script>
  </head>

  <script>

    $('#fecha_ini').datepicker({
        format: "dd/mm/yyyy",
        startDate: "15/10/1996",
        endDate: "15/01/2017",
        todayBtn: "linked",
        language: "es",
        todayHighlight: true
    });


  </script>

  <body>
    <h1>Hello, world!</h1>

    <div class="input-group date" data-provide="datepicker">
        <input type="text" id="fecha_ini" class="form-control">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>
  </body>
</html>
7
  • Hola estas realizando las pruebas en Firefox? el 20 oct. 2017 a las 15:28
  • Sí, igualmente en Chrome
    – DianaDiana
    el 20 oct. 2017 a las 15:29
  • En Firefox no funciona correctamente, te debería deshabilitar los días fuera del rango de fecha, pero si te permite verlos, datePicker de bootstrap si debería funcionar correctamente en Chrome. Por eso pregunte donde estas realizando las pruebas el 20 oct. 2017 a las 15:33
  • Gracias, sin embargo en ninguno de los dos funciona :( Es decir, no deshabilita los días
    – DianaDiana
    el 20 oct. 2017 a las 15:34
  • 1
    Para que funcione como lo tienes debes cambiar $('#fecha_ini').datepicker({ por $('.input-group.date').datepicker({ el 20 oct. 2017 a las 16:00

2 respuestas 2

2

Intenta seleccionar una fecha anterior al 15 de octubre de 1996 y no se puede, intenta seleccionar una fecha posterior al 15 de enero y tampoco se puede. Este es el código:

  $('#fecha_ini').datepicker({
        format: "dd/mm/yyyy",
        startDate: "15/10/1996",
        endDate: "15/01/2017",
        todayBtn: "linked",
        language: "es",
        todayHighlight: true
    });
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

    <link rel="stylesheet" href="datePicker/css/bootstrap-datepicker.css">
    <script src="datePicker/js/bootstrap-datepicker.min.js"></script>
    <!--Esta fue la linea que agregué --->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
    
    <script src="datePicker/locales/bootstrap-datepicker.es.min.js"></script>
    <!--Y esta otra también--->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css">
    <h1>Hello, world!</h1>

    <input type="text" id="fecha_ini" class="form-control">
     

0

Dejando el código como tu lo tienes, es decir que al lado del campo fecha salga un icono sería:

$(function(){
    $('.input-group.date').datepicker({
        format: "dd/mm/yyyy",
        startDate: "15/10/1996",
        endDate: "15/01/2017",
        todayBtn: "linked",
        language: "es",
        todayHighlight: true
    });
  });
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

    <link rel="stylesheet" href="datePicker/css/bootstrap-datepicker.css">
    <script src="datePicker/js/bootstrap-datepicker.min.js"></script>
    <!--Esta fue la linea que agregué --->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
    
    <script src="datePicker/locales/bootstrap-datepicker.es.min.js"></script>
    <!--Y esta otra también--->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css">
    <h1>Hello, world!</h1>

    <div class="input-group date" data-provide="datepicker">
        <input type="text" id="fecha_ini" class="form-control">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>

El problema que se generaba es porque usaste intercambiado los selectores de Jquery.

La respuesta que agregó fredyfx es la otra forma de acceder al campo fecha, es decir elimina los div y la etiqueta span para el icono

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.