CODEWITHSUNDEEP
javascriptbootstrapper
user7418450
user7418450

Reputation: 51

Bootstrap datepick

why the following code works correctly at https://angrytools.com/bootstrap/editor/ and doesn't work in Visual Studio Code. It's about datepick operation

please help

<!DOCTYPE html>
<html>
  <head>
      <title>Bootstrap datepicket demo</title>




      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
    $(function(){
    $('.date').datepicker({
        calendarWeeks: true,
        todayHighlight: true,
        autoclose: true
    });  
    });

    </script>
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap datepicker</h1>
      <div class="input-group date">
        <input type="text" class="form-control date"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

Views: 393

Answers (2)

Devsi Odedra
Devsi Odedra

Reputation: 5322

you have check datepicker CDN, this cdn is worked well

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
      <title>Bootstrap datepicket demo</title>




      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
    $(function(){
    $('.date').datepicker({
        calendarWeeks: true,
        todayHighlight: true,
        autoclose: true
    });  
    });

    </script>
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap datepicker</h1>
      <div class="input-group date">
        <input type="text" class="form-control date"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

I think you are linking scripts and CSS in the wrong order that's why it is not working. See below working example.

You have to link 2 CSS files and 3 JS files. This is where you gone wrong.

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());
});
label{margin-left: 20px;}
#datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<label>Select Date: </label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

Upvotes: 3

Related Questions