我在我的angular2应用程序中尝试了很多日期选择器,但它们都没有工作。虽然日期选择器显示在视图上,但所选日期的值没有进入ngModel变量。
答案 0 :(得分:48)
事实上,只需将date
值添加到输入的type
属性中即可使用日期选择器:
<input type="date" [(ngModel)]="company.birthdate"/>
在某些浏览器中,例如Chrome和Microsoft Edge(不在Firefox中),您可以单击输入中的图标以显示日期选择器。只有当鼠标悬停在输入上时才会显示图标。
要使用跨浏览器的东西,您应该考虑使用符合Angular2的库,如:
答案 1 :(得分:5)
PrimeNG还提供了一个DatePicker组件,现场演示;
答案 2 :(得分:2)
@thierry回答是的,我们可以选择使用
<input type="date" [(ngModel)]="company.birthdate"/>
获取我们项目的日期。但是,这与多浏览器平台(如mozila)不兼容,并且有许多相同的跨浏览器库。
我使用Bootflat主题创建了两个时尚的日历Datepickers,这也是响应式,请参阅此处
希望这能为您提供更时尚的多浏览器日期选择器。
答案 3 :(得分:1)
不确定它是否有帮助,但我们想为我们的项目开发一个自定义日期选择器,我们当时找不到很多Angular2 Datepicker,因此最终自己编写了一个简单的。 / p>
它是一个简单的选择日期,您还可以指定要在之前和之后禁用的日期。它使用事件发射器并在文本字段中设置所选日期。它是在npm发布的,我也在努力改进它。
https://www.npmjs.com/package/angular2-simple-datepicker
希望它有所帮助。
答案 4 :(得分:1)
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)
我正在使用这些引导程序库:
答案 5 :(得分:0)
请参阅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添加到您的提供者列表中。
答案 6 :(得分:0)
这是我的解决方案:
<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">
//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();
});
}
答案 7 :(得分:0)
我刚刚找到mydatepicker包只需输入npm install mydatepicker --save
并按照说明here如果你不喜欢他们的命名风格,只需在它周围创建一个包装组件即可适用于日期类型
答案 8 :(得分:0)
考虑使用angular-datepicker,它是为Angular应用程序构建的高度可配置的日期选择器。