Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap datepicker display month & year menus

In Bootstrap datepicker, I would like to have the Month & year menus as in jquery Ui datepicker enter image description here

But in Bootstrap date picker, there is no month & year menus and we have to click the month to change the year.

Is it possible to display both Month and Year Menus in the Bootstrap date picker?

like image 485
Karthick Avatar asked Dec 30 '14 07:12

Karthick


3 Answers

var datePick=$( "#datepicker" ).datepicker({
    changeMonth: true,
    changeYear: true
});
datePick.click(function (event) {
    event.stopPropagation();
});

Try this

like image 157
Rahul Singh Avatar answered Oct 21 '22 12:10

Rahul Singh


I think dhtmlxCalender would be a far far better option for you in this case.

An example code for you-

var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2","calendar3"]);
#calendar,#calendar2,#calendar3
{
    border: 1px solid #909090;
    font-family: Tahoma;
    font-size: 12px;
}
<script src="http://dhtmlx.com/docs/products/codebase/dhtmlx.js"></script>
<link rel="stylesheet" type="text/css" href="http://dhtmlx.com/docs/products/codebase/dhtmlx.css"/>

<div style="position:relative;height:280px;">
   <input type="text" id="calendar">
   <input type="text" id="calendar2">
   <input type="text" id="calendar3">
</div>

A Codepen.IO example is given here by me.

Output will be like this-

enter image description here

Moreover every part of this date picker is easily customizable (CSS).


Another Way is using Bootstrap Datepicker-

$(document).ready(function ()
{
	$('#example1').datepicker({
		format: "dd/mm/yyyy"
	});  

});
<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<!--JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>


		<div class="container">
			<input  type="text" placeholder="click to show datepicker"  id="example1">
		</div>
like image 37
Abrar Jahin Avatar answered Oct 21 '22 12:10

Abrar Jahin


Here is a link that you might have the same issue: Bartosz Kopiński DatePicker

$('.date').datepicker({
  "format": "yyyy-mm",
  'startView': 1
}).on('changeMonth', function(e) {
   var dp = $(e.currentTarget).data('datepicker');
   dp.date = e.date;
   dp.setValue();
   dp.hide();
});

$('.yearpicker').datepicker({
 "format": "yyyy",
 'startView': 2
}).on('changeYear', function(e) {
  var dp = $(e.currentTarget).data('datepicker');
  dp.date = e.date;
  dp.setValue();
  dp.hide();
});
like image 2
John Roca Avatar answered Oct 21 '22 14:10

John Roca