使用ngmodel - angular将值设置为角度材质日期拾取器

ngModel是Angular框架中的一个指令，用于在表单控件和组件之间建立双向数据绑定。通过ngModel，可以将表单控件的值与组件中的属性进行绑定，实现数据的双向同步。

在使用ngModel时，可以将值设置为角度材质日期拾取器。角度材质日期拾取器是一种用于选择日期的UI组件，通常用于表单中的日期输入。

在Angular中，可以使用第三方库如Angular Material或ngx-bootstrap来实现角度材质日期拾取器。这些库提供了丰富的UI组件，包括日期拾取器。

以下是一个示例代码，演示如何使用ngModel和Angular Material的日期拾取器：

首先，需要在项目中引入Angular Material库。可以通过npm安装依赖：

npm install @angular/material @angular/cdk

在Angular模块中导入所需的模块和组件：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    FormsModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule
  ],
  exports: [
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule
  ]
})
export class AppModule { }

在组件中使用ngModel和日期拾取器：

<mat-form-field>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在上述代码中，[(ngModel)]="selectedDate"将输入框的值与组件中的selectedDate属性进行双向绑定。用户选择日期时，selectedDate的值也会相应更新。

这是一个简单的示例，你可以根据具体需求进行定制和扩展。同时，腾讯云也提供了一些相关产品和服务，如云服务器、云数据库等，可以根据具体场景选择适合的产品。

更多关于Angular Material日期拾取器的信息，可以参考腾讯云的官方文档：Angular Material日期拾取器

matDatepicker的布局和功能不能正常工作

angular、datepicker、angular-material

我就是想不出我忘了联系什么。但最终我有了一个不可能使用的datepicker "@angular/material"："^9.2.3“ <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepi

浏览 14提问于2020-05-14得票数 0

回答已采纳

1回答

角/料/数据报警器-没有为DateAdapter找到提供者

angular、typescript、datepicker、material-design、angular6

我有一个问题：angular / material / datepicker。我有一个虚拟项目，它可以正确地处理以下文件： /src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimat

浏览 1提问于2018-08-05得票数 1

1回答

打开日历时角度材料日期选择器的设计问题

javascript、angular、typescript、datepicker、angular-material2

我在使用角度材质Datepicker时遇到了一个问题，我似乎找不到问题的根源。我想不出一种方法来表达这个问题。每当我打开日历并选择日期时，覆盖层都太大，超出了方框的边界。希望这张附图能有所帮助：我在组件所在的模块中有以下导入： import { MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatOptionModule } from '@angular/material'; import { MomentDateModule } from '@an

浏览 6提问于2020-03-11得票数 1

1回答

角度材质日期选择器不会显示在页面中

angular、datepicker、angular-material、mat-datepicker

我正在尝试向页面添加一个角度材质日期选择器。我一直在这样跟踪official doc's example，但我的页面上什么也没有显示。在app.component.html中有： <section> <mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" /> <mat-datepicker

浏览 20提问于2020-07-07得票数 0

8回答

@角/材料数据报警器位置

angular、angular-material

我正在使用@角/材料2模块添加数据报警器到我的角4应用程序。这是我的HTML <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepick

浏览 2提问于2017-10-14得票数 10

回答已采纳

1回答

角质材料不适用样式

angular、angular-material

我遵循了关于如何安装角质材料的指南。首先我是通过cli添加的 ng添加@角/材料在app.module.ts中，我添加了以下附加行： import {MatDatepickerModule} from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; imports: [ [...], MatDatepickerModule, MatNativeDateModule ], pro

浏览 1提问于2020-07-24得票数 0

回答已采纳

7回答

角质材质类不工作

javascript、html、angular、angular-material2

我正在使用角材料添加日期选择到我的应用程序。由于某些原因，角材料没有应用原始的角材料样式。如何在我的应用程序中显示：：如何显示：：我所做的： npm install --save @angular/material @angular/cdk npm install --save @angular/animations // Added this to the Angular Module whose components require the date picker import {MatNativeDateModule, MatDatepickerModule

浏览 1提问于2018-01-16得票数 23

1回答

Angular2 Material2 -如何禁用/启用mat-数据报警器-切换窗体重新生成

angular2-forms、angular-material2

角版5.2.4，Material2 5.2.4 我正在使用这些元素的组合：垫-成型场使用matinput指令输入垫-数据报警器垫子-数据采集器-开关 ...in是在数据源更改时重新构建的表单。我可以设置输入和垫-数据报警器切换到禁用，或启用，在最初的形式构建。重新生成窗体时，输入的禁用属性是可设置的。但是，对于任何在初始窗体生成之后重新构建的窗体，切换的禁用属性仍然处于初始状态(无论是启用的还是禁用的)。状态(我在这里的元素周围使用引号)：与任何标准的“输入元素”一样，可以通过添加禁用的属性来禁用datepicker输入。默认情况下，"mat-d

浏览 5提问于2018-08-08得票数 2

回答已采纳

2回答

角13材料数据报警器没有正确地应用样式。

javascript、angular、datepicker、angular13

我一直在努力学习如何使用角13数据报警器，我不知道什么是不正常的工作。这是我的主要模块。 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; import { MatFormFiel

浏览 7提问于2022-06-29得票数 0

1回答

Angular 5 material DatePicker布局拥塞了几个月

angular、datepicker、angular-material

我在angular 5中使用了mat-datepicker来获取输入日期。然而，当日历打开时，几个月的布局是奇怪的(内容变得拥挤)。其他月份看起来还不错。我也在styles.css中导入了indigo-pink.css html代码： <tr style="width:50%"> <td> <span class="cellLabel">Choose a Date for Installation:</span>

浏览 18提问于2019-06-23得票数 0

回答已采纳

1回答

角材料DatePicker不可见

html、angular、datepicker、angular-material

我正在尝试在我的项目中使用棱角材料数据报警器。数据报警器本身是不可见的，但是如果我单击它的位置或日历图标所在的位置，它就会工作。为了清晰起见，我在datepicker旁边添加了一个按钮。是什么原因导致数据机的行为是这样的？为了清晰起见，我在数据报警器旁边添加了一个按钮。我的HTML文件： <div> <mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatep

浏览 0提问于2020-12-16得票数 1

7回答

角质材料日期-选择器工作不正常

angular、angular-material

我正试着像下面提到的那样，用角质材料数据报警器来获取日期，在html中 <mat-form-field> <mat-label>Custom calendar color</mat-label> <input matInput [matDatepicker]="picker2"> <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle> <mat-datepicker #picker2 colo

浏览 5提问于2019-10-18得票数 8

回答已采纳

1回答

无法绑定到'matDatepicker‘，因为它不是'div’的已知属性- Angular

javascript、angular、angular-material

我正在尝试显示datepicker，而不是输入元素，我使用了div标记，因为我只需要将所选日期显示为标签。下面是我的代码。 <mat-form-field>  <div matInput [matDatepicker]="picker"

浏览 10提问于2020-05-24得票数 2

1回答

不显示任何角度材质

javascript、angular、angular-material

我在组件中使用了角度材料，但是我看不到任何东西！我放了mat-selecet，mat-table，date-picker。我只看到当我悬停在它上面时，corsur正在改变，点击后它突然出现。没有任何评论。我添加了app.module、component.ts和component.html。 component.html： <head > <link href="https://fonts.googleapis.com/css?family=Amatic+SC:700&display=swap" rel="stylesheet">

浏览 0提问于2020-06-24得票数 0

1回答

角质材料数据报警器拒绝工作

angular、angular-material

我已经试着让它工作了将近一个小时，但我什么也没有得到，其他一切都很好，但我只是从这里得到一个白色的屏幕。我查看了StackOverflow和Github，但是我找不到解决办法。下面是event-log.component.html中的代码 <mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker"> <mat-datep

浏览 6提问于2020-07-20得票数 0

回答已采纳

7回答

MatDatepicker:没有为DateAdapter找到提供者。必须在应用程序根目录中导入以下模块之一: MatNativeDateModule

javascript、angular、typescript

我已经在我的app.module.ts文件中导入了匹配器，但是仍然显示了一些错误。我不能让材料部件起作用。该按钮工作良好，并使用角质材料组件。但是当我使用datepicker时，它就不起作用了。 app.module.ts文件 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import{ HttpClientModule} from '@angular/common/http'; import

浏览 0提问于2019-06-08得票数 30

回答已采纳

1回答

不能绑定到“matDatepicker”，因为它不是“输入”的已知属性

angular、typescript、angular-material

我将使用一个材料日期选择控制器。但它显示出一个错误。当然，我在MatDatepickerModule文件中添加了app.module.ts。让我在这里向您展示我的代码的一些部分： import { MatDatepickerModule } from '@angular/material/datepicker'; ... @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule,

浏览 0提问于2021-05-28得票数 0

回答已采纳

1回答

角度材料日期选取器无法读取欠精确度的属性

javascript、angular、typescript、angular-material

我正在尝试使用MatDatePicker，但我一直收到非常奇怪的错误，你可以在控制台中看到(下面的屏幕截图)。它不允许我打开日期选择器 Console error 1 Console error 2 以下是代码应用程序模块 @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MatIconModule, MatButtonModule, FlexLayoutModule, MatDatepickerMo

浏览 21提问于2021-11-11得票数 0

回答已采纳

2回答

角度:错误：“席形场”不是已知的元素。

angular、typescript

在执行单元测试时，我会得到以下错误：错误：‘mat-form-field’不是已知的元素错误：‘mat-grid-tile’不是已知的元素。等。通常，当app.module.ts中缺少导入时，您会得到这些错误，但我确保它们是可用的： import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angu

浏览 0提问于2020-08-10得票数 0

回答已采纳

3回答

材料日期选择器与ngModel的双向绑定？

angular、typescript、angular-material

我有一个stepper表单，在第一步中，用户需要使用Angular Material design Datepicker组件选择日期。当用户进入下一步时，我希望绑定他们选择的值，并将其再次显示在输入字段的顶部(他们也应该能够在此处更改它)。我尝试过[(ngModel)]，但不确定我是否正确使用它。 <mat-form-field> <input [(ngModel)]="date" formControlName="dateFormCtrl" matInput [matDatepicker]="picker"

浏览 1提问于2018-04-20得票数 2