Bootstrap-datepicker: year, year-month, year-month-day picker possibilities

Created on 24 Jul 2012 · 9Comments · Source: uxsolutions/bootstrap-datepicker

Given the way current datepicker is implemented. Its possible to have year picker, year-month picker along with the current date picker alone.

I've tried to do it automatically with parseDate, but didn't had success. So, this alternative version.

diff against current version is https://gist.github.com/3169847

Here is the code which shows the picker in action

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="bootstrap.2.0.4.css">
<link rel="stylesheet" type="text/css" href="datepicker.css">
</head>
<body>
<div class="container">
<form class="form form-horizontal">
<input type="text" id="a" date-date-format="dd/mm/yyyy"/>
<input type="text" id="b" date-date-format="mm/yyyy"/>
<input type="text" id="c" date-date-format="yyyy"/>
</form>
</div>
<script type="text/javascript">
$('#a').datepicker({startView : 'month', format : 'dd/mm/yyyy', enableYearToMonth: true, enableMonthToDay : true});
$('#b').datepicker({startView : 'year', format : 'mm/yyyy', enableYearToMonth: true, enableMonthToDay : false});
$('#c').datepicker({startView : 'decade', format : 'yyyy', enableYearToMonth : false, enableMonthToDay : false,});
</script>
</body>
</html>

Source

nareshv

Most helpful comment

its not working

jitendraF5buddy on 14 Mar 2016

👍3

All 9 comments

cnlpete on 28 Jul 2012

I think I have a nice solution:

$('.monthpicker').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();
});

bartoszkopinski on 24 Aug 2012

@bartoszkopinski very nice! :)

xthiago on 9 Nov 2012

Great! Thank you, I was stuck trying to dismiss the picker and update the value on month change.

:+1:

link82 on 11 Jan 2013

Latest datepicker has minViewMode and startView options, should be good for this.

eternicode on 21 Feb 2013

Hi, this solution is very good for selecting only yyyy-mm format, but if you need to change the selected month when you click again it show the month viewmode.

obuma-erp on 22 Sep 2014

@sidronsile 添加一个配置项即可: {minViewMode: 1}，this is my solution:
$('.date-picker').datepicker({
format: "yyyy-mm",
minViewMode: 'months', // or 1, 月选择
startView: 'decade' // or 2, 10年选择
}).on('changeMonth', function(e) {
$(e.currentTarget).data('datepicker').hide();
});

gchjob on 4 Jan 2016

its not working

jitendraF5buddy on 14 Mar 2016

👍3

Hi,
I was using minViewMode to select months as a range. For e.g., January - March. But as it is stated in docs as

The day is set to the 1st for “months”, and the month is set to January for “years”, the year is set to the first year from the decade for “decades”, and the year is set to the first from the millennium for “centuries” HERE

If we are using minViewMode for range, then i need to select from January - 1st to March - 31st. And not March 1st as it would select now.

Is there any option to change the selected date when using minViewMode?