I am using bootstrap datepicker and my code is like following, Demo of the code on jsfiddle
<div class="input-append date" id="datepicker" data-date="02-2012"
data-date-format="mm-yyyy">
<input type="text" readonly="readonly" name="date" >
<span class="add-on"><i class="icon-th"></i></span>
</div>
$("#datepicker").datepicker({
viewMode: 'years',
format: 'mm-yyyy'
});
The above code is working fine, but what I am trying to do is allow users pick months and years only.
Could you please tell me how to do that?
This question is related to
jquery
twitter-bootstrap
Why not call the $('.input-group.date').datepicker("remove");
when the select statement is changed then set your datepicker view then call the $('.input-group.date').datepicker("update");
I am using bootstrap calender for future date not allow with allow change in months & year only..
var j = jQuery.noConflict();
j(function () {
j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
});
j(function () {
j(".Futuredatenotallowed").datepicker({
changeMonth: true,
maxDate: 0,
changeYear: true,
dateFormat: 'dd-M-yy',
language: "tr"
}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
}).val()
});
For the latest bootstrap-datepicker
(1.4.0 at the time of writing), you need to use this:
$('#myDatepicker').datepicker({
format: "mm/yyyy",
startView: "year",
minViewMode: "months"
})
Source: Bootstrap Datepicker Options
I'm using version 2(supports both bootstrap v2 and v3) and for me this works:
$("#datepicker").datepicker( {
format: "mm/yyyy",
startView: "year",
minView: "year"
});
To view the months of the current year, and only the months, use this format - it only takes the months of that year. It can also be restricted so that a certain number of months is displayed.
<input class="form-control" id="txtDateMMyyyy" autocomplete="off" required readonly/>
<script>
('#txtDateMMyyyy').datetimepicker({
format: "mm/yyyy",
startView: "year",
minView: "year"
}).datetimepicker("setDate", new Date());
</script>
Notice that in the version of 1.2.0 the viewMode
has changed to startView
.
eg:
$('#sandbox-container input').datepicker({
startView: 1,
minViewMode: 1
});
You should have to add only minViewMode: "months"
in your datepicker function.
Source: Stackoverflow.com