如何删除mat datepicker文本框中的默认值？
要删除 mat datepicker 文本框中的默认值，可以使用以下方法：
- 使用 Angular 的双向数据绑定，将文本框的值绑定到一个变量上。然后在组件中初始化这个变量为空字符串或 null，这样默认值就不会显示在文本框中了。
- 在组件中使用 ViewChild 获取到 mat datepicker 对象，然后调用其 clear 方法。clear 方法会清除日期选择器中的值，从而实现删除默认值的效果。
示例代码如下：
<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>import { Component, ViewChild } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent {
@ViewChild(MatDatepicker) datepicker: MatDatepicker<any>;
selectedDate: Date;
clearDate() {
this.selectedDate = null;
this.datepicker._datepickerInput.value = ''; // 清空文本框中的值
this.datepicker.close(); // 关闭日期选择器
}
}在这个例子中，我们使用了 Angular 的双向数据绑定将选中的日期绑定到 selectedDate 变量上。clearDate 方法会将 selectedDate 设置为 null，然后清空文本框中的值，并关闭日期选择器。
推荐的腾讯云相关产品：腾讯云云服务器（ECS）、腾讯云云函数（SCF）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档链接。
注意：本回答中未提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
相关·内容
我在下面的方式中使用角质材料的数据变送器范围。
组件类
form = new FormGroup({});
model: DashboardFilterModel = {
criteria: '',
category: undefined,
range: undefined,
};
fields: FormlyFieldConfig[] = [
{
key: 'range',
type: 'datepicker-range',
props: {
label: 'Rango',
浏览 12提问于2022-11-17得票数 0
我在我的angular 9应用程序中使用mat datepicker，如下所示： <input type="text" class="form-control date_input" name="my_on"
[matDatepicker]="myDatepicker" #myDate="ngModel"
dateValidator placeholder="mm/dd/yyyy" [(ngModel)]="my" id="my_on
浏览 39提问于2021-07-29得票数 1
5回答
我使用的是角材料数据报警器指令，而且我没有什么问题。
1.当我打开日期选择器对话框并选择任意日期时，日期显示在输入文本框中，但是当输入文本框中发生任何更改时，我希望调用一个函数。
现在，如果我在输入文本框中手动输入任何值，我将使用( input )指令触发函数，它运行良好，如代码所示。当使用日期选择器对话框更改日期时，我希望触发相同的函数。
2. i还希望在从日期选择器对话框中选择日期时，将日期格式从mm/dd/yyyy更改为dd/mm/yyy。这里，在这个指令中默认设置mm/dd/yyyy。
<input matInput [matDatepicker]="organizati
浏览 0提问于2018-04-06得票数 25
回答已采纳
我已经成功地将素材导入到我的Angular 8项目中，并且我正在使用bootstrap进行样式设置。我不打算使用所有的材质库，只有在需要的时候。Datepicker from material是我需要使用的一个例子。 我曾尝试使用mat-datepicker，但遇到了切换对齐的问题。 以下是模板： <input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker"
style="width: 80px;"
浏览 36提问于2019-06-24得票数 2
我有最新的模板： <input type="text" class="form-control" name="my_date"
[matDatepicker]="myDatepicker" #myDate="ngModel"
[(ngModel)]="myDateValue" id="my_date" required>
<ma
浏览 20提问于2019-06-24得票数 0
我们如何设置为一个角垫日期选择器，其中默认的选择值是1年后，从今天？谢谢。
当日期标记加载时，默认值应该是从现在开始的1年。
#html代码
<mat-form-field appearance="fill" class="full-width" [ngClass]="{'date-field-error-underline': walgreensFields.formError.nextNoticeEndDate !== null}">
<mat-label [ngC
浏览 5提问于2022-02-03得票数 0
回答已采纳
这是我的HTML代码
<mat-form-field class="datepicker">
<mat-label>Pick a date</mat-label>
<input matInput
#resultPickerModel="ngModel"
[matDatepicker]="resultPicker"
[(
浏览 10提问于2022-02-19得票数 0
在角垫-数据报警器，我想显示默认日期为明天。有关参考，请使用以下代码：
<mat-form-field appearance="outline" class="example-full-width">
<mat-label>select date</mat-label>
<input matInput class="matInput" [matDatepicker]="picker" placeholder="select date" [min]="minDat
浏览 1提问于2019-10-31得票数 1
回答已采纳
jQuery 1.7.2，jQuery UI Datepicker Widget
在我的数据表里：
Today and future dates are enabled
Previous dates are disabled
我遇到了一种情况，我需要在文本框中显示一个旧日期，但是当单击图像时，弹出窗口应该启用了“今日”中的日期。当前，如果旧日期是2014年6月1日，则显示在文本框中。如何在文本框中显示2014年6月1日，并从今天起启用弹出日期？
Javascript:
<script type="text/javascript">
$(fun
浏览 0提问于2014-06-18得票数 0
回答已采纳
1回答
我有两个内裤picker1和picker2。我想要的是，当我在picker1中选择一个日期时，picker2应该自动被选中，而picker2中的日期应该是picker1中的60天。
例如，如果它在2021年3月1日在picker1，那么它应该是2021年4月29日在picker2
我在堆栈溢出中搜索了各种解决方案，但无法得到确切的解决方案。如果你们知道，请帮帮忙
Datepicker1:
<td>
<mat-form-field >
浏览 1提问于2021-03-13得票数 2
回答已采纳
我有以下模板： <input type="text" class="form-control" name="my_date"
[matDatepicker]="myDatepicker" #myDate="ngModel"
[(ngModel)]="myDateValue" id="my_date" required>
<mat-datepicker-togg
浏览 20提问于2019-06-24得票数 0
我有一个材料数据选择器，它是由mysql数据库发送的值设置的。
该按钮始终被禁用，因为日期选择器已经包含一个值，因此不应该禁用该按钮。但是，当我使用日期选择器将该值更改为另一个日期时，将启用该按钮。
在这里，脚本(我使用日期的静态值来模拟来自服务器的相同日期)：
从服务器返回的值是2018-2-12 00:00:00，并显示在我的项目中的日期选择器(如2/12/2018 )中，但在stackblitz中，它显示为2/12/2018 00:00:00。
html脚本：
<form [formGroup]="formGroup">
<mat-card&g
浏览 0提问于2018-11-20得票数 1
回答已采纳
这是我的jquery datepicker $(".monthPickerStart").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :s
浏览 13提问于2019-02-13得票数 1
回答已采纳
我的父组件有一个next按钮，应该被禁用，直到用户在子控件的任何一个控件中输入一个值。子控件具有下拉列表、文本框和日期日历控件。我正在考虑为每个控件使用一个输出发射器，如果任何值发生变化，按钮将被启用。然而，我不认为这会是那么简单，我想知道是否有更简单的方法。
下面是简化程度较低的代码父组件的html：
<ng-container [ngSwitch]="activeLayout">
<ng-container *ngSwitchCase="repair">
<
浏览 8提问于2021-03-06得票数 1
如何在mat-datepicker中添加清除按钮。恰好在打开的日历中如何添加一个日期清理按钮。
<input matInput [(ngModel)]="data1" [matDatepicker]="data1" [value]="" formControlName="data1" id="data1" name="data1">
<mat-datepicker-toggle matSuffix [for]="data1"></mat-datepick
浏览 24提问于2019-08-13得票数 12
我的日期选择器默认设置为今天，这有利于了解我的代码当前正在运行的状态。我希望能够传递它的值，所以我使用ngModel，它使我的datePicker为空。我发现ngInit可以硬编码默认值，但问题是我不知道在ngInit中代表dateTime.Now的是什么。 <mat-form-field>
<mat-label>Angular forms</mat-label>
<input matInput [matDatepicker]="picker1" [formControl]="date" [(ngModel)]
浏览 13提问于2020-03-24得票数 2
回答已采纳
2回答
我有2个日期时间选取器，endDate不能小于startDate
endDateAfterOrEqualValidator(formGroup): any {
var startDateTimestamp: number;
var endDateTimestamp: number;
startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
endDateTimestamp = Date.parse(formGroup.controls['endD
浏览 0提问于2017-11-29得票数 12
回答已采纳
1回答
我有一个mat表，它的数据是从数据库中加载的，其中一列必须是教科书，以便用户可以编辑其内容来更新数据库中的表
问题是我不能加载文本框中的数据
<ng-container matColumnDef="test">
<mat-header-cell *matHeaderCellDef mat-sort-header> test </mat-header-cell>
<mat-cell *matCellDef="let row"><input type="text"
浏览 0提问于2018-04-06得票数 0
3回答
嘿，iam将我的滑块数据库为一个值为1和0的属性。在1开关应该是活动的，在0它不应该。我成功地建立了一些输入和选择元素的数据库，但是在Slider上我遇到了以下错误：
未指定名称属性的窗体控件没有值访问器。
这是我的HTML部分：
<div class="slidercontainer aftericn">
Off
<mat-slide-toggle [(ngModel)]="endless" #ctrl="ngModel" name="endless"
id="endless
浏览 0提问于2018-03-21得票数 2
回答已采纳
当我试图运行我的角应用程序时，我得到了这个错误：
./node_modules/saturn-datepicker/fesm2015/saturn-datepicker.js @ saturn-datepicker.js:1765
__webpack_require__ @ bootstrap:79 ./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:79 ./src/main.ts @ environment.ts:16
__webpack_require__ @ bootstr
浏览 1提问于2020-03-01得票数 0
为了获得一个地区感知(关于本周开始)的Material DatePicker，我创建了这个扩展： import { Injectable } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { Platform } from "@angular/cdk/platform";
import { getLocaleFirstDayOfWeek } from "@angular/common";
import { Nativ
浏览 6提问于2020-12-02得票数 5
我有一个stepper表单，在第一步中，用户需要使用Angular Material design Datepicker组件选择日期。
当用户进入下一步时，我希望绑定他们选择的值，并将其再次显示在输入字段的顶部(他们也应该能够在此处更改它)。
我尝试过[(ngModel)]，但不确定我是否正确使用它。
<mat-form-field>
<input [(ngModel)]="date" formControlName="dateFormCtrl" matInput
[matDatepicker]="picker"
浏览 1提问于2018-04-20得票数 2
在问题How to validate field with input type=time via form control?中 如何验证这样的datepicker (已禁用输入字段) <mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="datePickerCtrl" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-da
浏览 14提问于2019-02-03得票数 0
4回答
我正在动态地生成一个表单，我需要根据模型命名我的控件。
我的工作是角5和角材料5。
但是，当我得到以下错误时，我无法动态命名日期选择器(Mat-DatePicker)。
InstrumentSearchComponent.html:27 ERROR TypeError: this._datepicker._registerInput不是函数
这就是我试图用动态名称创建控件的方式，这导致了上面的错误。
<mat-form-field>
<input matInput [matDatepicker]="dynami
浏览 2提问于2018-02-18得票数 8
我正在开发一个使用离子4/角度7和角度材料7.2.1的应用程序。 该应用程序使用巴西日期格式DD/MM/YYYY。 当我用datepicker本身选择日期时，输入的文本没有问题。 但是，在datepicker的(模糊时)输入中输入日期后，月份和日期会被切换。例如，如果我在模糊事件之后键入03/02/2015，输入将显示02/03/2015。 app.module.ts： import 'moment/locale/pt-br';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material&#
浏览 12提问于2019-01-10得票数 1
1回答
我需要一个数据报警器的应用程序，我正在工作。我从这里选了一个，。我在数据报器组件中插入的代码是从下面的内容中提取的，该代码更改了数据报童颜色。
datepicker.ts
import {Component} from '@angular/core';
/** @title Datepicker palette colors */
@Component({
selector: 'datepicker-color-example',
templateUrl: 'datepicker-color-example.html',
style
浏览 0提问于2019-05-19得票数 1
回答已采纳
我不确定如何使用formcontrol值来控制另一个元素的显示。我知道使用ngModel，但这不是一个选择。基本上，我必须使用不同的元素，我需要使用另一个表单项的值来控制这些元素中的东西。下面是一个例子： <mat-form-field class="example-full-width" appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [min]="minDate" [matDatepicker]=
浏览 22提问于2021-11-19得票数 0
回答已采纳
3回答
为什么Chrome会为这个数据机提供一个密码呢？我该怎么阻止它？
<mat-form-field appearance="fill">
<mat-label>Start date</mat-label>
<input type="text" matInput [formControl]="startDate" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]=&#
浏览 3提问于2021-08-31得票数 0
我正在尝试在moment.js中使用Angular材质DatePicker，在我的用例中，我需要排除周末。 在材料文档中，他们说明了如何使用javascript默认日期执行此操作 import {Component} from '@angular/core';
/** @title Datepicker with filter validation */
@Component({
selector: 'datepicker-filter-example',
templateUrl: 'datepicker-filter-example.htm
浏览 12提问于2020-01-31得票数 0
回答已采纳
3回答
我正在使用angular材质创建表单，并使用带有appearance = "outline"属性的mat-form-field。当图像加载并单击输入时，我遇到了图像问题： ? 但当您单击重新加载页面时，通常会显示如下图所示： ? 我发现这个问题是在我第一次加载页面或者使用ctrl + F5重新加载时出现的。所有输入都会出现此问题，包括那些只有3个字母的占位符，甚至输入中也没有图标。 有人知道我怎么调整这个吗？ Edit1 :遵循我的一个输入的代码： <mat-form-field appearance="outline"
浏览 28提问于2019-05-15得票数 0
回答已采纳
2回答
我正在使用mat-datepicker在我的角度版本12项目。数据选择器日历视图显示1998年1月至1月的错误日期。
1998年1月1日是从星期四开始的，但它是在星期天举行的.只有3天是错误的显示。
这是表单字段。
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-sm="15" fxFlex.sm="50" class="p-1">
<mat-label>Da
浏览 14提问于2022-03-06得票数 0
回答已采纳
2回答
角质资料日期变送器得到无效值
、、、、
<mat-form-field>
<input matInput [(ngModel)]="myDate" name="myDate" [matDatepicker]="Datepicker"
(click)="Datepicker.open()" >
<mat-datepicker-toggle matSuffix [for]="Datepicker"></mat-datepicker-toggle>
<mat-
浏览 0提问于2018-08-01得票数 3
回答已采纳
我有两个棱角分明的日期选择器。对于第一个，可以设置开始日期，第二个是结束日期。选择开始日期后，如何禁止选择较早的日期作为结束日期？
我试过使用min="value"，也从.ts中设置了最小日期，但它们都不起作用。
<div class="form-group" >
<mat-form-field>
<input name="picker" matInput [matDatepicker]="picker" placeholder="Choose shipping
浏览 3提问于2019-05-21得票数 0
1回答
我来自命令式编程(C++、Java、C#)，正在努力理解angular组件中的泛型。以为例。它有一个泛型类型参数。如果我按如下方式实例化该组件
<mat-form-field appearance="fill">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #pick
浏览 31提问于2021-03-14得票数 0
我想在单击submit按钮后保留选定的值。现在，当我从datepicker中选取值并单击submit按钮时，我的文本框值将变为空。我使用javascript.Following是我的代码
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<input type="text" id="datepicker" name="<portlet:namespace/>datepicker" v
浏览 1提问于2014-11-15得票数 0
4回答
我有两个日期选择器:开始日期和结束日期。我希望检查选择了哪些日期，以便拒绝用户选择大于结束日期的开始日期和小于开始日期的结束日期。
<mat-form-field class="my-datepicker">
<input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today" [formControl]="startDate">
<mat-datepicker-t
浏览 1提问于2018-04-24得票数 1
回答已采纳
1回答
我的材料设计datepicker在Angular中呈现在内容下面。 我有一个组件，它是模块的一部分，并在app-root中呈现。在里面我有mat-stepper，在一个步骤里我有mat-datepicker。 这就是我的组件如何分配。看起来像这样： <mat-horizontal-stepper #stepper>
<mat-step>
<div data-component="app-root">
<section>
...
&l
浏览 11提问于2020-04-23得票数 0
2回答
角度材质日期拾取器服务
、、、
我正在使用这个角度材质库： https://material.angular.io/components/datepicker/api 我正在尝试使用他们推荐的服务MatDatepickerIntl。 datepicker.component.html： <mat-form-field class="example-full-width">
<input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder=&
浏览 15提问于2019-02-11得票数 0
我正在使用Selenium在一个Angular/C#应用程序上进行E2E测试。
我想用硒填一张有棱角的材料表格。
有两个表单域: date1和date2
Date1运行良好:我清空字段并填写新的日期：
public void Wait(IWebDriver _webDriver, string elementString)
{
WebDriverWait wait = new WebDriverWait(_webDriver, TimeSpan.FromSeconds(5));
IWebElement element = wait.Until(ExpectedConditions.
浏览 7提问于2021-05-17得票数 0
我正在创建一个对API的POST请求，其中一个抛出错误的字段是mat-datepicker字段，因为它在ngOnInit()调用中(我猜还没有选择任何内容)。诸如name、email等字段运行良好，但我在从datepicker字段中获取值时遇到了问题……如何在提交表单时也发送该值？ 我的尝试是这样的： ngOnInit() {
this.myForm = new FormGroup({
date_of_birth: new FormControl(new Date().toISOString(), [
Validators.required,
this
浏览 5提问于2020-03-30得票数 0
回答已采纳
我在angular (7)应用程序中使用了material datepicker小部件。下面给出了html。
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Expiry Date" [formControl]="expiryDateInputCtrl">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggl
浏览 41提问于2019-07-25得票数 1
回答已采纳
1回答
我用的是角质材料。我想在切换幻灯片按钮后禁用数据报警器。
我的数据表上传表：
<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="upload(uploadForm.valid)">
<div class="input-wrapper">
<mat-form-field>
<input
id="date"
na
浏览 0提问于2018-07-31得票数 0
回答已采纳
1回答
我有一个date_of_birth字段，其中保存了一个划时代的字符串。我想使用角度材料日期选择器来更改日期，这是可能的，通过
//convert matDatepicker timestamp format to epoch and save
var newDOB = new Date(privateUser.date_of_birth).getTime().toString();
privateUser.date_of_birth = newDOB;
但是，在将其存储到db之前，当尝试将其显示在日期选择中作为默认日期时，我不太确定如何还原它。
这是我现在的代码
<div *ngIf=&
浏览 4提问于2019-09-30得票数 0
1回答
我试图从.ts文件绑定日期，但它无法绑定。
这里是工作代码，而不是工作代码和下面的问题
//Not working
<mat-label>Date Of Birth</mat-label>
<input matInput [matDatepicker]="pickerDOB" [max]="maxAllowedDateOfBirth" placeholder="Date of birth" [(ngModel)]="dateOfBir
浏览 1提问于2021-03-21得票数 0
回答已采纳
我有一个角度反应形式使用的材料，我设置了一个日期范围与两个垫-内裤。在创建表单时，我正在设置默认的最小日期和最大日期，并且所有操作都很好。
我的问题是，当用户重置表单时，我希望再次在表单中设置默认日期，以便进行另一次查询。我试图通过从变量中获取默认的min和最大值日期，并使用setValue来实现，但是默认日期并没有像在ngOnInit中那样显示在数据夹中。当我登录到控制台时，将在窗体控件中设置这些值。为什么不像在ngOnInit上那样出现呢？
HTML：
<form novalidate autocomplete="off" spellcheck="false&
浏览 0提问于2021-02-02得票数 0
回答已采纳
我对Angular是个新手。我使用的是Angular4材料日期选择器，下面是我的日期选择器代码
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat
浏览 1提问于2017-10-10得票数 0
我有三个日期选择字段，contractPeriodFrom，contractPeriodTo和dateOfAppointment。dateOfAppointment应该在contractPeriodFrom和contractPeriodTo之间。我不知道如何做到这一点，因为两个contractPeriod字段都是表单控件。
<div fxLayout="row">
<mat-form-field fxFlex="50">
<input matInput [mat
浏览 6提问于2021-08-31得票数 3
回答已采纳
我要求显示开始日期和结束日期的日期，即，如果开始日期是dd/mm/yyyy格式的10/09/2020，结束日期应该是到昨天，即09/09/2020，所有剩余的日期应该被禁用。
我如何才能做到这一点？
<mat-form-field color="accent" appearance="fill">
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="picker1"
浏览 2提问于2020-09-10得票数 0
4回答
如何通过点击按钮清除角质物料数据报警器？
我试过.date .value .clear .reset .resetDate
他们似乎都没有清除数据报警器。
HTML：
<mat-form-field>
<input matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat
浏览 2提问于2018-04-23得票数 18
回答已采纳
我有一个用于日期筛选的表单，我尝试为日期输入的开始日期和结束日期设置默认值。
<form [formGroup]="filter" (ngSubmit)="applyFilter()">
<mat-form-field>
<input matInput [matDatepicker]="start" formControlName="start" placeholder="Начальная дата">
<mat-datepicker-toggle mat
浏览 2提问于2018-09-10得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
