Question

我在我的angular2应用程序中尝试了很多日期选择器，但它们都没有工作。虽然日期选择器显示在视图上，但所选日期的值没有进入ngModel变量。

Answer 1

事实上，只需将date值添加到输入的type属性中即可使用日期选择器：

<input type="date" [(ngModel)]="company.birthdate"/>

在某些浏览器中，例如Chrome和Microsoft Edge（不在Firefox中），您可以单击输入中的图标以显示日期选择器。只有当鼠标悬停在输入上时才会显示图标。

要使用跨浏览器的东西，您应该考虑使用符合Angular2的库，如：

Answer 2

PrimeNG还提供了一个DatePicker组件，现场演示;

http://www.primefaces.org/primeng/#/calendar

Answer 3

@thierry回答是的，我们可以选择使用

<input type="date" [(ngModel)]="company.birthdate"/>

获取我们项目的日期。但是，这与多浏览器平台（如mozila）不兼容，并且有许多相同的跨浏览器库。

我使用Bootflat主题创建了两个时尚的日历Datepickers，这也是响应式，请参阅此处

https://github.com/MrPardeep/Angular2-DatePicker

希望这能为您提供更时尚的多浏览器日期选择器。

Answer 4

不确定它是否有帮助，但我们想为我们的项目开发一个自定义日期选择器，我们当时找不到很多Angular2 Datepicker，因此最终自己编写了一个简单的。 / p>

它是一个简单的选择日期，您还可以指定要在之前和之后禁用的日期。它使用事件发射器并在文本字段中设置所选日期。它是在npm发布的，我也在努力改进它。

https://www.npmjs.com/package/angular2-simple-datepicker

希望它有所帮助。

Answer 5

Angular 2（打字稿）

也可以使用(blur)="newProjectModel.eEDate = eEDatePicker.value"事件执行此操作。

仔细查看有关模糊事件的#eEDatePicker，它会将输入临时变量newProjectModel.eEDate值分配给我们的模型变量<form (ngSubmit)="onSubmit()" #newProjectForm="ngForm" > <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label for="end-date">Expected Finish Date</label> <div class='input-group date datetimepicker'> <input type='text' class="form-control" required [(ngModel)]="newProjectModel.eEDate" name="eEDate" #eEDate="ngModel" #eEDatePicker (blur)="newProjectModel.eEDate = eEDatePicker.value" /> <span class="input-group-addon"> <span class="fa fa-calendar"></span> </span> </div> <div [hidden]="eEDate.valid || eEDate.pristine" class="alert alert-danger"> Expected Finish Date is required </div> </div> </div> </div> <div class="modal-footer" [hidden]="submitted"> <button [hidden]="submitted" type="button" class="btn btn-red" data-dismiss="modal" >Cancel</button> <button [hidden]="submitted" type="submit" class="btn btn-green" [disabled]="!newProjectForm.form.valid">Save</button> </div> <div class="modal-footer" [hidden]="!submitted"> <button [hidden]="!submitted" focus class="btn btn-green" data-dismiss="modal" (click)="submitted=false">Ok</button> </div> </form>

    train = df1.iloc[:,[4,6]]
            target =df1.iloc[:,[0]]

            def train(classifier, X, y):
                X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.25, random_state=33)

                classifier.fit(X_train, y_train)
                print ("Accuracy: %s" % classifier.score(X_test, y_test))
                return classifier

        trial1 = Pipeline([
            ('vectorizer', TfidfVectorizer()),
            ('classifier', MultinomialNB()),
        ])

        train(trial1, train, target)

我正在使用这些引导程序库：

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Answer 6

请参阅ng2-boostrap datePicker seems to overwrite ngModel，虽然问题不同，但给出的答案解决了您为我描述的问题。

假设使用typescript，您需要将其添加到html标记：

<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>

并在组件ts文件中，您需要导入

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

并将DATEPICKER_DIRECTIVES添加到您的提供者列表中。

Answer 7

这是我的解决方案：

HTML

<input id="send_date"
       type="text"
       [(ngModel)]="this.dataModel.send_date"
       name="send_date"
       #send_date="ngModel"
       class="date-picker"
       data-date-format="dd-mm-yyyy">

.TS

//My data model has "send_date" property
dataModel: MyDataModel;

ngAfterViewInit() {

    //important point: You have to create a reference to this outer scope
    var that = this;

    $('#send_date').datepicker({
        //... your datepicker attributes
    }).change(function () {
        that.dataModel.send_date = $('#send_date').val();
    });

}

Answer 8

我刚刚找到mydatepicker包只需输入npm install mydatepicker --save并按照说明here如果你不喜欢他们的命名风格，只需在它周围创建一个包装组件即可适用于日期类型

Answer 9

考虑使用angular-datepicker，它是为Angular应用程序构建的高度可配置的日期选择器。

如何在Angular 2中使用日期选择器？

9 个答案:

HTML

.TS