Javascript bootstrap-datepicker Example to Display the Selected Date Using Calendar Input Field in Moment.js

Welcome folks today in this blog post we will be using the bootstrap-datepicker library to display the selected date using calendar input field in moment.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Datepicker Example</title>
	<!-- Required stylesheets -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

	<!-- Required JavaScript files -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
	<div class="container">
		<h1>Bootstrap Datepicker Example</h1>

		<div class="form-group">
			<label for="datepicker">Select a Date:</label>
			<input type="text" class="form-control" id="datepicker">
		</div>

		<div class="form-group">
			<label for="selected-date">Selected Date:</label>
			<input type="text" class="form-control" id="selected-date" readonly>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Datepicker Example</title>

</head>

<body>

<h1>Bootstrap Datepicker Example</h1>

<label for="datepicker">Select a Date:</label>

</div>

<label for="selected-date">Selected Date:</label>

</div>

</body>

</html>

As you can see we are including the cdn of the bootstrap and the datepicker and then also we are including the moment.js library cdn and then we have the input field for displaying the datepicker field.

$(document).ready(function(){
			$('#datepicker').datepicker({
				format: "dd-mm-yyyy",
				autoclose: true,
				todayHighlight: true,
				startView: 0,
				minViewMode: 0
			}).on('changeDate', function(e){
				$('#selected-date').val(moment(e.date).format("DD-MM-YYYY"));
			});
		});

$(document).ready(function(){

$('#datepicker').datepicker({

format: "dd-mm-yyyy",

autoclose: true,

todayHighlight: true,

startView: 0,

minViewMode: 0

}).on('changeDate', function(e){

$('#selected-date').val(moment(e.date).format("DD-MM-YYYY"));

});

As you can see we are initializing the bootstrap datePicker plugin to the input field using the datepicker() method and here we are passing the format of the date to be picked and then we are displaying the selected date using the moment.js library.