In Bootstrap datepicker, I would like to have the Month & year menus as in jquery Ui datepicker
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?
var datePick=$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
datePick.click(function (event) {
event.stopPropagation();
});
Try this
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-
Moreover every part of this date picker is easily customizable (CSS).
$(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>
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();
});
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