Wijmo datepicker for month

Posted by: willemfrits.dragstra on 18 July 2018, 6:25 pm EST

    • Post Options:
    • Link

    Posted 18 July 2018, 6:25 pm EST

    Dear madam/ sir

    I´d like to use a pair of wijmo datepickers which only provide month/ year picking.

    Furthermore the first picker should show always the first day of the selected month

    and the second one should show the last day of the selected month (pre-setting

    first day and last day of the current month).

    The newly implemented property: selection-mode=“Month” format=“y” is not working correctly for me.

    What would be the best way to implement the month-picker

    reference https://www.grapecity.com/en/forums/wijmo/support-for-a-month-picker

  • Posted 19 July 2018, 10:10 pm EST

    So here is what I did:

    <wj-input-date

    class=“whatever”

    [(value)]=“periode.last”

    (valueChanged)=“onChangeOfLastPicker()”

    [selectionMode]=“‘Month’”

    [format]=“‘MM/yyyy’”

    >

    This opens the second datepicker showing only the month and year option.

    The day is automatically set to the first of the month (which is fine concerning the first picker!).

    The second picker calls the method onChangeOfLastPicker() with the following content:

    const day = this.getDaysInMonth(this. periode.last.getMonth() + 1, this. periode.last.getFullYear());
    this.periode.last.setDate(day);
    
    public getDaysInMonth(m: number, y: number) :number  {
            return m===2 ? y & 3 || !(y%25) && y & 15 ? 28 : 29 : 30 + (m+(m>>3)&1);
    }
    

    Stack overflow: https://stackoverflow.com/questions/315760/what-is-the-best-way-to-determine-the-number-of-days-in-a-month-with-javascript

    I hope it helps

  • Posted 19 July 2018, 11:17 pm EST

    Hi,

    Thanks for sharing your approach. The second one seems good.

    InputDate.selectionMode property only formats the drop calendar shown to show only months, if you truly wish to limit the user input then you may handle the valueChanged event and perform the required changes.

    Please refer to following sample which implements the above-mentioned requirement:-

    http://jsfiddle.net/71zq0ywg/1/

    ~Manish

  • Posted 22 July 2018, 5:48 pm EST

    or better

    const day = new Date(this.period.last.getFullYear(), this.period.last.getMonth() + 1, 0).getDate();
    
    this.period.last.setDate(day);
    
  • Posted 23 July 2018, 12:23 am EST

    Thanks the example is great.

    Could you do the same example using Angular2.

    (I come from Angularjs and I have little experience programming Angular2).

    saludo willem

  • Posted 23 July 2018, 11:45 pm EST

    Hi,

    You may refer to the following sample for angular version of the same:-

    https://stackblitz.com/edit/angular-smajbh?file=app%2Fapp.component.ts

    ~Manish

  • Posted 23 July 2018, 11:46 pm EST

    Hi,

    You may use selectedItem property of the combo-box to get the current selected item.

    //please refer to following code snippet:-

    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    
     
     
    <wj-combo-box class="wj-combo-box" #cb//define ref
     
     
    [(text)]="item.Current_Season_Name"
     
     
    (textChanged)="getSelectedObject(cb.selectedItem)"//get current item
     
     
    [itemsSource]="Seasons"
     
     
    [displayMemberPath]="'Season_Name'"
     
     
    [selectedValuePath]="'Season_ID'"
     
     
    [isEditable]="false"
     
     
    [placeholder]="''">
     
     
    </wj-combo-box>
     
     
    
    </ng-template>
    

    ~Manish

  • Posted 24 July 2018, 6:27 pm EST

    Thanks the Angular2 example looks great and is very similar to what I implemented, Finally I also added a lost focus which evals the two dates in order.

    	   ```
    

    [(value)]=“periodeSelectionnee.dateDebut”

    (lostFocus)=“onDatePersonnalisee()”

    [selectionMode]=“‘Month’”

    [format]=“‘MM/yyyy’”

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels