Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngx-bootstrap datepicker option to pick only month and a year

I'm using ngx-botstrap BsDatepickerModule for my application form and I have a requirement to pick only a month. Does anyone know where I can find a solution? This issue has been raised almost a year ago and looks like it is highly demanded, so I conceal a hope to get an answer. This is what I would like to see after clicking a date selector button: enter image description here

like image 736
dim0_0n Avatar asked Jul 05 '18 21:07

dim0_0n


2 Answers

I managed to solve this using the same bsDatepicker, with minimal effort

Component template:

<form class="container">
<input [(ngModel)]="modelDate" autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'MM/YYYY'}" (onShown)="onOpenCalendar($event)">
Result: <p>{{modelDate}}</p>
</form>

Component code sample:

onOpenCalendar(container) {
 container.monthSelectHandler = (event: any): void => {
   container._store.dispatch(container._actions.select(event.date));
 };     
 container.setViewMode('month');
}

Check working sample here https://stackblitz.com/edit/ngx-datepicker-month-picker-poc

like image 70
dahool Avatar answered Sep 22 '22 06:09

dahool


Just place minMode:'month' in bsConfig, this worked perfectly fine for me.

[bsConfig]="{ minMode:'month', adaptivePosition: true, dateInputFormat: 'MMMM YYYY' }"
like image 44
Kamran Sohail Avatar answered Sep 22 '22 06:09

Kamran Sohail