Base solution for your next web application
Open Closed

Date field 2 way binding in Angular 2 #3588


User avatar
0
zokho created

Hi Guys, Can somebody help with a simple question on how I can implement a 2 way binding on a Date type in Angular 2? I have got property in C# as:

public DateTime StartDate { get; set; }

The following line in Angular 2 does not work!

<input  class="form-control" name="startDate" data-provide="datepicker" data-date-format="dd/mm/yyyy" [(ngModel)]="schedule.startDate" />

I noticed that the Swagger has generated the following for the property:

startDate: moment.Moment;

Not sure if I need to do a casting from moment to dateTime. If yes how? I have created a Pipe for date as below:

import { Pipe, PipeTransform } from '@angular/core';

import * as moment from 'moment';

@Pipe({ name: 'datePipe' })
export class DatePipe implements PipeTransform {
    transform(date) {
        if (date != null) {
            let momentdate: moment.Moment = moment(date);
            return momentdate.toDate();
        }
    }
}

But seems we are not allowed to use pipe in [(ngModel)]!

Any thought?


2 Answer(s)
  • User Avatar
    0
    zokho created

    I have found that there is a DatePickerComponent in "app/shared/common/timing/date-picker.component" that as been imported in AppCommonModule. But couldn't locate its usage anywhere within the existing code! Can someone provide me a sample of its usage in a html as of a tag?

    cheers

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @zokho,

    I have shared a sample usage for datepicker. I will investigate why this scenario does not work.

    Can you explain below attributes on your input element ? Are they come from a javascript library.

    data-provide="datepicker" data-date-format="dd/mm/yyyy"
    

    Thanks.