问题标签 [mat-datepicker]

描述

我正在尝试将其包装MatDatePicker在一个名为的自定义组件中MyDatePicker，以便我可以在 html 中使用它，如下所示。

问题

始终未定义，似乎我在下面dateVariable实现的双向绑定不起作用。一旦用户从选择器中选择了一个新的日期，setter 就会被调用。但是，新值未绑定到dateVariable.

问题

• 如何在自定义日期选择器和变量之间实现双向绑定？
• 如何实现单向绑定（从日期选择器-> 变量）？

执行

HTML 文件：

TS 文件：

MyDatepicker.component.ts

MyDatepicker.component.html：

I am working with Angular Material and facing the problem to manage the DatePicker component because it's doing hide input box and because of that the selected date is not coming in the value of Input tag.

Attached Picture of My Issue

我正在使用来自 Angular 材料的这个 UI 组件。

https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header

我想在自定义标题中添加关闭按钮，但似乎还不可能。

至少我想从日期选择器标题组件中获取输出事件。

我正在制作一个自定义日期选择器组件，以便它可以与本地化和 moment.js 以及反应形式一起使用。

我已经设置了组件，但是在 DateChange 事件之后，在它退出区域后，它会抛出一个错误：

目前，我不知道如何修复它，尽管我试图修复它，ChangeDetectorRef这使得我的验证无法触发，类似的事情也会发生在this.control.updateValueAndValidty().

毕竟，它发生得比我触发任何事情都要晚很多。我想这是输入元素的问题，所以我会尝试同时捕捉它的变化事件。

所以这是date-picker.component.ts：

这是date-picker.component.html：

我正在通过返回带有值或的对象来更改父组件中的min和值。同一个选择器有多个实例，所以我发送字符串值来区分它们。maxnew Date(year, month, day)null

我试图构建可重用的 datepicker 组件，该组件将具有本地化、特定的日期格式，并且可以轻松地合并到反应式表单中，因此我可以使用其余的表单数据对其进行验证，并显示Validation.required错误。

不幸的是，我不知道从哪里开始调试它。

编辑：我试图制作一个stackblitz，但它给了我很多错误，但仍然是： https ://stackblitz.com/edit/angular-aylptw

我正在尝试将时间选择器添加到 mat 日期选择器。我尝试使用 mat-calendar-header 但 UI 发生了变化。有没有办法做到这一点。

HTML 文件：

自定义头文件：

我正在尝试将周数列添加到来自角度材料的 mat-datepicker 组件中使用的 mat-monthly-view 组件。我想扩展当前的 mat-monthly-view 并以某种方式告诉我的模块，当 mat-monthly-view 被调用时，用我的扩展视图替换它。但我找不到路。对这种解决方案有 Angular 支持吗？

更新

模块：

组件：

我没有收到错误，但 datepicker 月份视图中的组件是相同的，而不是我的新组件。

我正在使用 Angular 材质日历（即）mat-calendar。我正在尝试根据动态值禁用日历中的某些日期。

HTML

我正在使用自定义标头来捕获下/上个月的事件，然后调用一些休息 api，并根据此调用的结果，我想禁用一些日期。this.nextClicked()和this.previousClicked()的调用；仅在其余 api 给出响应后生成。

我正在使用dateFilter属性，但我的所有变量都未定义

TS

如果您有任何想法或任何方法以编程方式更改禁用日期谢谢

我无法从中获得价值mat-datepicker。它说undefined。我用过ngForm，ngModel但我不知道我错在哪里。

客户端form.ts

这些是我在控制台中遇到的错误。

ClientFormComponent.html:41 ERROR 错误：如果在表单标签中使用 ngModel，则必须设置 name 属性或必须在 ngModelOptions 中将表单控件定义为“独立”。

示例 1：<input [(ngModel)]="person.firstName" name="first">

示例 2：<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

错误上下文 DebugContext_ {view: {…}, nodeIndex: 69, nodeDef: {…}, elDef: {…}, elView: {…}}

ERROR 错误：ViewDestroyedError：尝试使用已破坏的视图：detectChanges

这是发生错误的行。

我在使用 datepicker 时正在使用 Angular 我收到此错误：

HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "Internal Server Error", url: " http://localhost:53626/api/Customer ", ok: false, ...}error: " ↵http://localhost: 53626/api/Customer：500 内部服务器错误”名称：“HttpErrorResponse”ok：falsestatus：500statusText：“内部服务器错误”url：“ http://localhost:53626/api/Customer ”原型：HttpResponseBase

当我删除 bsDatepicker 时，它在简单的 HTML 中运行良好。我也尝试过 Material Datepicker，但服务器错误仍然存​​在。后端模型包含验证，可能从日期选择器发送的数据不匹配：

我想有条件地添加一个材料日期选择器，但不复制我的输入标签。

例如，如果我有这个：

.ts ：

简单的方法是在 *ngFor 中有 2 个输入：第一个输入是普通输入，第二个输入是与 matDatePicker 链接的输入

但我不想要这个解决方案，因为这意味着复制我的输入标签

.html：

我想要这样的东西（但当然这实际上不起作用）：