How to show month and year only in 720kb AngularJS Datepicker

Question

I'm using this angularJS datepicker in my application and would like to know if there is a way to display only months and years in the calendar and remove the days?

This is how I'm using the datepicker:

<datepicker date-format="MM yy" button-prev-title="previous month" button-next-title="next month" button-prev="<i class='fa fa-arrow-left'></i>" button-next="<i class='fa fa-arrow-right'></i>" id="dtDate" name="dtDate" >
    <input ng-model="dtDate" />
</datepicker>

I tried to add date-format="MM yy" but it only changes the selected date and not the datepicker itself.

So essentially you want just a year-and-month-picker? I don’t think it makes sense to use a datepicker, that has the explicit purpose of creating these month tables etc. and then pick a specific date, for that purpose in the first place. — CBroe, Jul 25 '17 at 10:59
UI Bootstrap allows the option of year-month mode in its datepicker though. Only I can't use that one because the entire application is using 720kb datepicker. — Tahreem Iqbal, Jul 25 '17 at 11:03
Well a component that specifically provides such a mode (and then presumably adapts the rendered UI accordingly as well) is something different than one that doesn’t, but is meant to be a datepicker only. So using the first one would make sense - using the second one probably rather doesn’t. You can of course try and eliminate the UI elements of the latter that you don’t like via CSS, but if that doesn’t do it, you would probably need to start modifying the actual code ... and that would definitively be the point where this does not make much sense any more. — CBroe, Jul 25 '17 at 11:07
of course if the plugin doesn't allow built in functionality then i'll have to look for other ways, one of which I did implement i.e. using two combo boxes, one for month and one for year and let user select from them. But I was hoping if something could be done using this datepicker. — Tahreem Iqbal, Jul 25 '17 at 11:11
You can use a datepicker that supports month picking [for example](https://stackoverflow.com/a/27980583/4488121), like [angular-ui-datepicker](http://angular-ui.github.io/bootstrap/#!#datepicker). — lenilsondc, Jul 25 '17 at 11:25

score 0 · Answer 1 · answered Sep 27 '17 at 16:25

I think you might be interested in using this git repository that I created. https://github.com/morfsys/multiple-month-picker

This is how you can use it in your project:

HTML

<input type="text" multiple-month-picker />

JS

//Initiate your app by injecting 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys'])

It helps you to select multiple months across multiple years. The best thing? It is on AngularJS.

I hope it helps you.

score 0 · Answer 2 · edited Jun 07 '18 at 10:36

I have the same problem with angularjs-datepicker. I used another datepicker: angularjs-material. Here is how you can use it:

<md-datepicker ng-model="startDate" md-mode="month" md-placeholder="dd/MM/yyyy" md-date-locale="mylocale" md-open-on-focus></md-datepicker>

And then in your controller:

function pad(n) {return n < 10 ? "0"+n : n;}
$scope.mylocale = {
  formatDate: function(date) {
    var d=new Date(date);
     if(isNaN(d.getTime())) {
       return '';
     } else {
       return pad(d.getDate())+"/"+pad(d.getMonth()+1)+"/"+d.getFullYear();
     }
  },
  parseDate: function(date) {
     var ds = date.split('/');
     var d=new Date(ds[2],ds[1]-1,ds[0]);
     if(isNaN(d.getTime())&&d!=''){
       return new Date(NaN);
      } else {
        return d;
      }
   } };

And it is working. Just make sure that you properly handle case when input is invalid (form.startDate.$invalid).

If someone has a solution for angularjs-datepicker, please let us know.

How to show month and year only in 720kb AngularJS Datepicker

2 Answers2