Date binding to Moment.js

Question

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 · Answer

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 · Answer

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

Deepa Loganathan · Answer

Hi Frederik, 
 
Most welcome. Please let us know if you have any further queries. 
 
Regards,  
 
Deepa L.

Wizgod · Answer

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 · Answer

Hi Santosh, 
 
Thanks for the update. 
 
Regards, 
Sureshkumar P