Date binding to Moment.js

[frederik]

My API is generated by Swagger (Nswag) which converts Datetime into moments (moment.js), rather than Date, for various reasons. Is there is a simple way to bind the DateTimePicker to a moment, rather than introducing additional variables/pipes and change monitoring every time the control is used? Any ideas would be great!

Binding it to the moment directly caused a complete freeze of the application - no errors thrown or nothing. The application becomes completely unresponsive and needs to be force quit.

Thanks

[Deepa Loganathan]

Hi Frederik,    

   

Thanks for contacting Syncfusion support.    

   

Our Datepicker component is designed only to accept the Javascript Date object and will not accept custom Dateobject from momentJS.    

   

However, you can convert the moment to Date object or vice versa to get or set values to our Datepicker component as shown in the below code snippet.    

   

export class DefaultDateTimePickerComponent {   

    // Getter   

    public date: Object = moment().toDate();   

   

    //Setter   

     onChange(args): void {   

        var p = moment(args.value);   

        console.log(p);   

   

    }   

}   

   

   

For your convenience, we have attached a simple JSplayground sample for assigning value form the moment object.   

    

Sample Link: https://stackblitz.com/edit/angular-l1goqo-u7afbs?file=default.component.ts    

   

Please get back to us if you require further assistance on this.    

   

Regards,     

Deepa L.  

[frederik]

Thank you. Afterwards, I thought a wrapper would be the best option and it looks like it is.

Many thanks

[Deepa Loganathan]

Hi Frederik, 

 

Most welcome. Please let us know if you have any further queries. 

 

Regards,  

 

Deepa L. 

[Wizgod]

A few years gone by but the post is still relevant today.

I went looking to see if anyone had posted code for a wrapper but didn't find one so I'm posting what I've come up with to help anyone else looking for a solution.

It doesn't implement everything but should be enough of a starting point; hopefully it helps someone.

Wg

<wg-datetimepicker [id]="'ClockIn' + i" class="font-larger" [readonly]="!canEditTimeClock" [showClearButton]='false' [step]='5' 

placeholder='Select a date' [(ngModel)]="timeClocks[i].adjustedClockIn" (onOpen)="openClockIn($event, i)"></wg-datetimepicker>

import { Component, OnInit } from '@angular/core';

import { ViewChild, Injector, Input, Output, EventEmitter, forwardRef } from '@angular/core';

import { appModuleAnimation } from '@shared/animations/routerTransition';

import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/forms';

import { AppComponentBase } from '@shared/common/app-component-base';

import * as moment from 'moment';

@Component({

    selector: 'wg-datetimepicker',

    template:

        `<ejs-datetimepicker #WgDateTimePicker

        [id]="id" 

        [class]="class" 

        [readonly]="readonly" 

        [showClearButton]='showClearButton' 

        [step]='step' 

        [placeholder]='placeholder' 

        [(ngModel)]="dateValue" 

        (blur)="onBlur.emit($event)"

        (focus)="onFocus.emit($event)"

        (open)="onOpen.emit($event)"

        (close)="onClose.emit($event)"

        (change)="onChange($event)">

        </ejs-datetimepicker>`

    ,

    providers: [{

        provide: NG_VALUE_ACCESSOR,

        useExisting: forwardRef(() => WgDateTimePickerComponent),

        multi: true

    }],

    animations: [appModuleAnimation()]

})

export class WgDateTimePickerComponent extends AppComponentBase implements OnInit, ControlValueAccessor {

    @ViewChild('WgDateTimePicker', {static: false}) dateTimePicker;

    dateValue: Date = null;

    @Input() formControl: FormControl;

    @Input() id = '';

    @Input() tindex = '';

    @Input() readonly = false;

    @Input() showClearButton = false;

    @Input() isRequired = false;

    @Input() isDisabled = false;

    @Input() step = 5;

    @Input() class = '';

    @Input() style = '';

    @Input() placeholder = '';

    @Input() defaultDate: moment.Moment = null;

    @Input() value: moment.Moment;

    // Event names changed to avoid conflict.

    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();

    @Output() onBlur: EventEmitter<any> = new EventEmitter<any>();

    @Output() onFocus: EventEmitter<any> = new EventEmitter<any>();

    @Output() onOpen: EventEmitter<any> = new EventEmitter<any>();

    @Output() onClose: EventEmitter<any> = new EventEmitter<any>();

    propagateChange: any = () => { };

    constructor(injector: Injector) {

        super(injector);

    }

    ngOnInit(): void {

        if (this.defaultDate != null && this.value === null) {

            this.value = this.defaultDate;

            this.propagateChange(this.value);

        }

        this.setValue(this.value);

    }

    setValue(value: any) {

        // Set the Moment value.

        this.value = value === undefined || value === null ? null : moment(value);

        // Set the Date value.

        this.dateValue = this.value === null ? null : this.toDate(this.value);

    }

    writeValue(obj: any): void {

        this.setValue(obj);

    }

    registerOnChange(fn: any): void {

        this.propagateChange = fn;

    }

    registerOnTouched(fn: any): void { }

    setDisabledState?(isDisabled: boolean): void {

        this.isDisabled = isDisabled;

    }

    onChange(event: any) {

        this.setValue(event.value);

        // Push the Moment value.

        this.propagateChange(this.value);

        this.valueChange.emit(this.value);

    }

    toDate(date: any): Date {

        var newDate = moment(date);

        return new Date(newDate.year(), newDate.month(), newDate.date(), newDate.hour(), newDate.minute());

    }

}

[Sureshkumar P]

Hi Santosh, 

 

Thanks for the update. 

 

Regards, 

Sureshkumar P