-1

I want to use datepicker in Bootstrap 4.3.1 cdn but I'm not able to get it.
Below you can see my code.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input id="datepickerfrom" name="datepickerfrom" width="250" required />
    <script>
        $('#datepickerfrom').datepicker({
            uiLibrary: 'bootstrap4'
        });
    </script>
Dharman
  • 30,962
  • 25
  • 85
  • 135
shubham dubey
  • 1
  • 1
  • 1
  • 3

3 Answers3

1

The bootstrap-datepicker is not a part of the Bootstrap. So maybe you have to include datepicker plugin code before use it.

<!-- Include Bootstrap Datepicker -->
<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>

Reference : datepicker is not a function in bootstrap 4.1

CDN links : https://cdnjs.com/libraries/bootstrap-datepicker

WaLinke
  • 726
  • 2
  • 6
  • 25
1

Use daterange-picker much easier to setup https://www.daterangepicker.com/#examples

<input type="text" class="form-control" name="birthday"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script>
$(function() {
  $('input[name="birthday"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 666,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
    alert("You are " + years + " years old!");
  });
});
</script>
se6
  • 121
  • 8
0

Bootstrap 4 has made it simple. You can just change your input type to date

<input id="datepickerfrom" name="datepickerfrom" width="250" type="date" required />

ref: https://www.w3schools.com/tags/att_input_type_date.asp

Nikhil G
  • 9
  • 2