Breaking News: Grepper is joining You.com. Read the official announcement!

date picker for bootstrap 4

Add Answer

Healthy Herring answered on May 14, 2020 Popularity 10/10 Helpfulness 5/10

answer date picker for bootstrap 4

related datetimepicker bootstrap 4

related date picker for bootstrap 4

date picker for bootstrap 4

Comment

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

Popularity 10/10 Helpfulness 5/10 Language html

Source: bootstrap-datepicker.readthedocs.io

Tags: bootstrap-4 date html picker

Link to this answer
Share Copy Link

Contributed on May 14 2020

Healthy Herring

0 Answers Avg Quality 2/10

Closely Related Answers

datetimepicker bootstrap 4

Comment

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 4 Datetime Picker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css">
</head>
<body>
  <div class="container">
    <h2>Bootstrap 4 Datetime Picker</h2>
    <div class="form-group">
      <label for="datetimepicker">Select Date and Time:</label>
      <div class="input-group date" id="datetimepicker" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker"/>
        <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Include jQuery first, then Bootstrap JS dependencies -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <!-- Include Tempus Dominus datetimepicker JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
  <script>
    // Initialize the datetimepicker
    $(document).ready(function() {
      $('#datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        // Add any additional options or configurations here
      });
    });
  </script>
</body>
</html>

Popularity 9/10 Helpfulness 6/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

date picker for bootstrap 4

Comment

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d'
});

Popularity 10/10 Helpfulness 5/10 Language whatever

Source: bootstrap-datepicker.readthedocs.io

Tags: bootstrap-4 boot

Link to this answer
Share Copy Link

Contributed on May 14 2020

Healthy Herring

0 Answers Avg Quality 2/10

date picker for bootstrap 4

Contents

More Related Answers

date picker for bootstrap 4

Closely Related Answers

datetimepicker bootstrap 4

date picker for bootstrap 4

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.