Bootstrap Datepicker Example

Bootstrap Datepicker
Follow us

Picking up customized dates quickly with clean UI becomes easy due to the Bootstrap Datepicker feature. Bootstrap Date picker plugin lets you create a dynamic date picker with more options and without doing lengthy JavaScript code. The plugin has made the date picking feature at an enhanced level.

It plays a vital role in the application everywhere.

Let’s see how to use it.

What are the requirements

1] Bootstrap [Bootstrap (JS, CSS) and Bootstrap-Datepicker (JS, CSS) ]

2] jQuery

These are the above requirements tested for Bootstrap Datepicker

How to Use it?

Initiate the date picker via JavaScript

$('.date-picker').datepicker();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DatePicker Example</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".date-picker").datepicker();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row m-2 text-center">
            <div class="col-lg-3">
                <input type="text" class="date-picker form-control">
            </div>
        </div>
    </div>
    
</body>
</html>

To configure the date picker you can pass options for customized features.

Using Options:
$('.date-picker').datepicker({
	autoclose: true,
	todayHighlight: true,
	format: "dd/mm/yyyy"
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DatePicker Example</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".date-picker").datepicker({
				calendarWeeks: false,
				autoclose: true,
				todayHighlight: true,
                format: "mm/dd/yyyy"
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row m-2 text-center">
            <div class="col-lg-3">
                <input type="text" class="date-picker form-control">
            </div>
        </div>
    </div>
    
</body>
</html>

In the above configuration, autoclose takes a false as boolean value by default. It is set to true which triggers the close event after selecting the date. This todayHighlight option highlights today’s date and format lets you define the date format like (dd/mm/yyyy, mm/dd/yyyy, yyyy/mm/dd, etc)

OptionDefault value
autoclosefalse
assumeNearbyYearfalse
beforeShowDay
beforeShowMonth
beforeShowYear
beforeShowDecade
beforeShowCentury
calendarWeeksfalse
clearBtnfalse
container‘body’
datesDisabled[]
daysOfWeekDisabled[]
daysOfWeekHighlighted[]
defaultViewDatetoday
disableTouchKeyboardfalse
enableOnReadonlytrue
endDateInfinity
forceParsetrue
format‘mm/dd/yyyy’
immediateUpdatesfalse
inputs
keepEmptyValuesfalse
keyboardNavigationtrue
language‘en’
maxViewMode4 ‘centuries’
minViewMode0 ‘days’
multidatefalse
multidateSeparator‘,’
orientation‘auto’
showOnFocustrue
startDate-Infinity
startView0 ‘days’ (current month)
templates
title
todayBtnfalse
todayHighlighttrue
toggleActivefalse
weekStart0 (Sunday)
zIndexOffset10

Leave a Comment

Your email address will not be published. Required fields are marked *