ItSolutionStuff.com

Bootstrap Datepicker Change Date Format Example

By Hardik Savani May 13, 2023
Bootstrap

Bootstrap is a very popular html css framework. Bootstrap through we can make batter responsive design. If you need datepicker with your date format like yyyy-mm-dd, yyyy/mm/dd, dd/mm/yyyy, dd-mm-yyyy etc then you can do it easily. so if you want to set date format then you have to just add one argument format and add format as you want like bellow example:

Example:

<html lang="en">

<head>

<title>Bootstrap Datepicker with format Example</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

</head>

<body>


<input class="date form-control" style="width: 300px;" type="text">


<script type="text/javascript">

$('.date').datepicker({

format: 'yyyy-mm-dd'

});

</script>


</body>

</html>

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube