Switch view mode when clicking month or year

[bjarnef]

You can switch year or month by clicking the prev/next buttons. However it would be tiresome if you want to go 50 years back from current date. It would be great if there was view mode to select year or month like how it works here this http://eternicode.github.io/bootstrap-datepicker/

[T00rk]

I plan it for a future release

[krtek4]

Here is a really dirty hack to put an input that allows you to select the year in a git diff format :

diff --git apps/astrame/static/vendor/bootstrap-material-datetimepicker.css apps/astrame/static/vendor/bootstrap-material-datetimepicker.css
index 27a1543..fd53e6b 100644
--- apps/astrame/static/vendor/bootstrap-material-datetimepicker.css
+++ apps/astrame/static/vendor/bootstrap-material-datetimepicker.css
@@ -7,7 +7,6 @@
 .dtp div.dtp-actual-month { font-size: 1.5em; }
 .dtp div.dtp-actual-num { font-size: 3em; line-height: 0.9; }
 .dtp div.dtp-actual-maxtime { font-size: 3em; line-height: 0.9; }
-.dtp div.dtp-actual-year { font-size: 1.5em; color: #DCEDC8; }
 .dtp div.dtp-picker { padding: 1rem; text-align: center; }

 .dtp div.dtp-picker-month, .dtp div.dtp-actual-time { font-weight: 500; text-align: center; }
@@ -57,3 +56,12 @@
 .dtp .clearfix { clear: both; }

 .dtp .center { text-align: center; }
+
+.dtp input.dtp-year-input {
+    font-size: 1.5em;
+    color: #DCEDC8;
+    background-color: #95c85b;
+    width: 4em;
+    border: 1px solid #7cb43c;
+    text-align: center;
+}
\ No newline at end of file
diff --git apps/astrame/static/vendor/bootstrap-material-datetimepicker.js apps/astrame/static/vendor/bootstrap-material-datetimepicker.js
index 696e3ff..83edb86 100644
--- apps/astrame/static/vendor/bootstrap-material-datetimepicker.js
+++ apps/astrame/static/vendor/bootstrap-material-datetimepicker.js
@@ -175,7 +175,9 @@ initTemplate: function ()
                 '<div class="left center p10">' +
                 '<a href="javascript:void(0);" class="dtp-select-year-before"><i class="material-icons">chevron_left</i></a>' +
                 '</div>' +
-                '<div class="dtp-actual-year p80">2014</div>' +
+                '<div class="dtp-actual-year p80">' +
+                '<input class="dtp-year-input" value="2014">' +
+                '</div>' +
                 '<div class="right center p10">' +
                 '<a href="javascript:void(0);" class="dtp-select-year-after"><i class="material-icons">chevron_right</i></a>' +
                 '</div>' +
@@ -224,6 +226,8 @@ initButtons: function ()
             this._attachEvent(this.$dtpElement.find('a.dtp-select-month-before'), 'click', this._onMonthBeforeClick.bind(this));
             this._attachEvent(this.$dtpElement.find('a.dtp-select-month-after'), 'click', this._onMonthAfterClick.bind(this));
             this._attachEvent(this.$dtpElement.find('a.dtp-select-year-before'), 'click', this._onYearBeforeClick.bind(this));
+            this._attachEvent(this.$dtpElement.find('.dtp-year-input'), 'keyup', this._onSetYear.bind(this));
+            this._attachEvent(this.$dtpElement.find('.dtp-year-input'), 'blur', this._onYearBlur.bind(this));
             this._attachEvent(this.$dtpElement.find('a.dtp-select-year-after'), 'click', this._onYearAfterClick.bind(this));
         },
         initMeridienButtons: function () {
@@ -495,7 +499,7 @@ showDate: function (date)
                 this.$dtpElement.find('.dtp-actual-day').html(date.locale(this.params.lang).format('dddd'));
                 this.$dtpElement.find('.dtp-actual-month').html(date.locale(this.params.lang).format('MMM').toUpperCase());
                 this.$dtpElement.find('.dtp-actual-num').html(date.locale(this.params.lang).format('DD'));
-                this.$dtpElement.find('.dtp-actual-year').html(date.locale(this.params.lang).format('YYYY'));
+                this.$dtpElement.find('.dtp-actual-year .dtp-year-input').val(date.locale(this.params.lang).format('YYYY'));^M
             }
         },
         showTime: function (date) {
@@ -780,6 +784,23 @@ _onYearBeforeClick: function ()
             this.currentDate.subtract(1, 'years');
             this.initDate(this.currentDate);
         },
+        _onSetYear: function () {
+            var el = $('.dtp-year-input');
+            var year = el.val();
+            if(year.length > 4) {
+                el.val(year.substring(0,4));
+            } else if (year.length == 4 && year != this.currentDate.year()) {
+                this.currentDate.year(year);
+                this.initDate(this.currentDate);
+            }
+        },
+        _onYearBlur: function() {
+            var el = $('.dtp-year-input');
+            var year = el.val();
+            if(year.length != 4) {
+                el.val(this.currentDate.year())
+            }
+        },
         _onYearAfterClick: function () {
             this.currentDate.add(1, 'years');
             this.initDate(this.currentDate);

I can provided it as a PR or anything else if asked, but since it probably only suits my own need I just put it like that for now.

[redekopmark]

I tried the above diff but didn't really like it, so I made my own fork and added what I wanted it to look like. I don't have a month view and don't plan on adding one, it's only a few clicks to get to the right month here's my fork: https://github.com/redekopmark/bootstrap-material-datetimepicker

this is my first time working with a jquery plugin so I'm sure I didn't do it entirely properly, but from my limited testing it works pretty well on chrome.

I'm new to github so hopefully I did it right, feel free to merge my code back into the main if you think it's up to your qualtiy

[mokraemer]

If you need to go back in years, a simple dropdown is sometimes more useful. This should be easy to add/change and might be enabled by an option.

For dates around current date, the existing solution is fine, but to enter birthdays this is really annoying. Currently I use the datepicker from jqueryui (https://jqueryui.com/datepicker/#dropdown-month-year) which works fine, but lacks the support of entering the time.

[ChrisTalman]

Has there been any progress with this?

While seven years can be viewed at a time, the experience is still not great for a user who wishes to select a date decades or centuries ago. The bootstrap-datepicker approach seems effective, and is also used by Windows for its calendar.

There also doesn't seem to be any easy way to navigate through the months. Again, the Windows calendar seems to solve this well: a view which simply displays all twelve months in a grid.