Setup ngmodel value of ng2-datepicker and also make it by not editable by keyboard

Question

I am using ng2-datepicker in project. This is the code which I am using.

<ng2-datepicker class="form-control" required [options]="{format:'MMM DD YYYY'}" [(ngModel)]="User.StartDate" name="StartDate"                                #StartDate="ngModel"></ng2-datepicker>

I am stuck with

Its not able to make non-editable by a keyboard.
According to my requirement model User.StartDate is need to bind only the date string. But it bind with an object of data like {day:"12",formatted:"May 12 2017",momentObject:"2017-05-11T18:30:00.000Z",month:"05",year:"2017"}. Is there any way to hold only the date string in this ng2-datepicker.

You need to do use User.StartDate.formatted before save data. — herr, May 30 '17 at 13:13

score 0 · Answer 1 · answered May 30 '17 at 13:10

In component you can set options for format

Sort example here:

import { DatePickerOptions, DateModel } from 'ng2-datepicker';

export class Component implements OnInit {

    public options: DatePickerOptions;

    ngOnInit() {
        this.options =  {
           format: "MM-DD-YYYY",
        };
        //You should initialize date attribute like
        this.user.StartDate = {formatted: 'MM-DD-YYYY'}; // It will work as placeholder/default value;

        // If you want blank on init 
        //this.user.StartDate = {formatted: ''};
    }
    //before save data
    save() {
       this.user.StartDate = this.user.StartDate.formatted;
    }

    //To make it non-editable by a keyboard, but allow Tab and Shift+Tab key
    eventHandler(event)
    {
        if(event.keyCode == 9) {
            if(event.shiftKey)
            {
                return true;
            }
            return true;
        }
        else {
            return false;
        }
    }
}

In template file:

<ng2-datepicker name="StartDate" [options]="options" [(ngModel)]="user.StartDate" (keydown)="eventHandler($event)"></ng2-datepicker>

Setup ngmodel value of ng2-datepicker and also make it by not editable by keyboard

1 Answers1