Menu
I'm studying on how to use bootstrap datepicker but i need it to show only the months or year just like this:
but the result only became like this:
I only need to pick the month and the year not the whole calendar. Below is my whole code snippet:
$(document).ready(() => {
$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})<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>My Teasting Website</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<!--bootstrap-datepicker css-->
<link rel="stylesheet" href="/src/datepicker/css/datepicker.css">
</head>
<body>
<input type="text" readonly="readonly" name="date" id="datepicker">
<script src="/src/jquery.js"></script>
<!--Bootstrap js-->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<script src="/src/datepicker/js/bootstrap-datepicker.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
400
Set changeMonth and changeYear to true so that Month and Year appear as Dropdown. Set date format to "MM yy". jQuery DatePicker has "onClose" event, which is called when Datepicker gets closed. So using this event, fetch the selected Month and Year and setDate of Datepicker.
Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.
Let's consider we have the below HTML code, in which we will be showing bootstrap datepicker without date part, and show only year part. $("#datepicker"). datepicker({ format: "yyyy", viewMode: "years", minViewMode: "years", autoclose:true //to close picker once year is selected });
The functionality you are looking for is in datetimepicker, not in just datepicker. It has the UI the way you want.
Note: The calendar will show Month or Year, but when you select a particular value, it will show it as YYYY-MM format. It is not possible to show either YYYY or MM in the textbox after selecting the value from calendar.
$(function() {
$('#datetimepicker2').datetimepicker({
viewMode: 'months',
format: 'YYYY-MM'
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker2' />
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
