ItSolutionStuff.com

How to Change View Mode in Bootstrap Datepicker Like yyyy-mm?

By Hardik Savani • June 7, 2023
Bootstrap

When i was working on my laravel application and i need use datepicker picker but i require only select year and month because i have to filter with onlt selected month and year. I did search lot and also check options of datepicker js but i can't do it that because i was wrong maybe.

But at last found minViewMode option of datepicker library and i did that if you also want to make format like mm-yyyy or yyyy-mm then you can set minviewmode this way :

Example:

<html lang="en">

<head>

<title>Bootstrap - datepicker change view mode like yyyy-mm</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>


<div class="container text-center">

<h2>Bootstrap - datepicker change view mode like yyyy-mm</h2>

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


<script type="text/javascript">

$('.date-own').datepicker({

minViewMode: 1,

format: 'yyyy-mm'

});

</script>

</div>


</body>

</html>

I hope it can help you...

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

We Are Recommending You

Bootstrap Datepicker Disable Specific Dates Example

Read Now →

Bootstrap Datepicker Disable Saturday and Sunday Example

Read Now →

How to use datepicker in vuejs?

Read Now →

Bootstrap Datepicker Trigger Change Event Example

Read Now →

Bootstrap Datepicker Get Date on Change Event Example

Read Now →

PHP Ajax Inline Editing using X-editable Bootstrap JS Example

Read Now →

Bootstrap Year Picker using Datepicker JS Example

Read Now →

AngularJS Simple Datepicker Directive Example Tutorial

Read Now →

JQuery Datepicker Example using JQuery UI JS

Read Now →

Bootstrap Datepicker Change Date Format Example

Read Now →

Bootstrap Timepicker using Datetimepicker JS Example

Read Now →

JQuery Delete Confirm Modal using Bootbox Example

Read Now →

How to Add Dialog Box in Bootstrap?

Read Now →