angular - 设置 ng2-datepicker 的 ngmodel 值，并使其无法通过键盘编辑

Question

我在项目中使用 ng2-datepicker。这是我正在使用的代码。

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

我被困住了

1. 它无法通过键盘使其不可编辑。

2. 根据我的要求模型 User.StartDate 只需要绑定日期字符串。但它与数据对象绑定，例如 {day:"12",formatted:"May 12 2017",momentObject:"2017-05-11T18:30:00.000Z",month:"05",year:"2017" }。有没有办法只保存这个 ng2-datepicker 中的日期字符串。

Answer 1

在组件中，您可以设置格式选项

排序示例在这里：

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;
        }
    }
}

在模板文件中：

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