Datepicker does not work

Navigation
0

again asking about datepicker with Bootstrap It turns out that perfectly appears the calendar but the options that I give seems to barely recognize the format. The rest is long and especially I need to block previous dates to which I mention. Thanks. 

   <!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>
    
asked by DianaDiana 20.10.2017 в 17:24
source

2 answers

1

Try to select a date before October 15, 1996 and you can not, try to select a date after January 15 and you can not either. This is the code: 

  $('#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">
    
answered by 20.10.2017 в 17:53
0

Leaving the code as you have it, that is to say that next to the date field, an icon would be: 

$(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>

The problem that was generated is because you used to exchange the Jquery selectors.

The response that fredyfx added is the other way to access the date field, that is, it removes div and label span for the icon

    
answered by 20.10.2017 в 18:05
How can I validate that my vending machine program accepts coins of 1 2 5 and 10 pesos and bills of 20 50 and 100 pesos Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https