Angular Material DatePicker with Input validation
I'm using Angular with Angular Material (7.0.2)
First I just used a basic Angular Material input with validation pattern. The input field is for a date like (YYYY-MM-DD). The Validation worked fine by entering the date manually. After that I added a Datepicker to the input. So you can enter the date manually or by datepicker. But after that the validation always thinks it's not correct whether the input happens by manually or via datepicker the input field is still red highlighted.
This is the inputfield
<mat-form-field class="input-date">
<input id="search-form-field-input-date-from" matInput #date
[formControl]="dateFormControlFrom" required placeholder="Date (YYYY-MM-DD)"
[matDatepicker]="datePickerFrom"
pattern="^(?:d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
>
<mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
<mat-datepicker #datePickerFrom></mat-datepicker>
</mat-form-field>
validate function:
private validateFormInput(): boolean {
return this.dateFormControlFrom.valid;
}
what I also noticed when I do:
console.log(this.dateFormControlFrom.value)
I get the date like Fri Nov 16 2018 00:00:00 GMT+0100 not like 2018-11-16 how it actually looks in the input.
angular validation datepicker angular-material edited Nov 16 '18 at 9:18
Zooly
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
add a comment |
I'm using Angular with Angular Material (7.0.2)
First I just used a basic Angular Material input with validation pattern. The input field is for a date like (YYYY-MM-DD). The Validation worked fine by entering the date manually. After that I added a Datepicker to the input. So you can enter the date manually or by datepicker. But after that the validation always thinks it's not correct whether the input happens by manually or via datepicker the input field is still red highlighted.
This is the inputfield
<mat-form-field class="input-date">
<input id="search-form-field-input-date-from" matInput #date
[formControl]="dateFormControlFrom" required placeholder="Date (YYYY-MM-DD)"
[matDatepicker]="datePickerFrom"
pattern="^(?:d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
>
<mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
<mat-datepicker #datePickerFrom></mat-datepicker>
</mat-form-field>
validate function:
private validateFormInput(): boolean {
return this.dateFormControlFrom.valid;
}
what I also noticed when I do:
console.log(this.dateFormControlFrom.value)
I get the date like Fri Nov 16 2018 00:00:00 GMT+0100 not like 2018-11-16 how it actually looks in the input.
angular validation datepicker angular-material edited Nov 16 '18 at 9:18
Zooly
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Can't you simply do in your validate function:return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.
– Zooly
Nov 16 '18 at 9:17
can you provide astackblitz.
– Farhat Zaman
Nov 16 '18 at 9:50
add a comment |
I'm using Angular with Angular Material (7.0.2)
First I just used a basic Angular Material input with validation pattern. The input field is for a date like (YYYY-MM-DD). The Validation worked fine by entering the date manually. After that I added a Datepicker to the input. So you can enter the date manually or by datepicker. But after that the validation always thinks it's not correct whether the input happens by manually or via datepicker the input field is still red highlighted.
This is the inputfield
<mat-form-field class="input-date">
<input id="search-form-field-input-date-from" matInput #date
[formControl]="dateFormControlFrom" required placeholder="Date (YYYY-MM-DD)"
[matDatepicker]="datePickerFrom"
pattern="^(?:d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
>
<mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
<mat-datepicker #datePickerFrom></mat-datepicker>
</mat-form-field>
validate function:
private validateFormInput(): boolean {
return this.dateFormControlFrom.valid;
}
what I also noticed when I do:
console.log(this.dateFormControlFrom.value)
I get the date like Fri Nov 16 2018 00:00:00 GMT+0100 not like 2018-11-16 how it actually looks in the input.
angular validation datepicker angular-material edited Nov 16 '18 at 9:18
Zooly
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
I'm using Angular with Angular Material (7.0.2)
First I just used a basic Angular Material input with validation pattern. The input field is for a date like (YYYY-MM-DD). The Validation worked fine by entering the date manually. After that I added a Datepicker to the input. So you can enter the date manually or by datepicker. But after that the validation always thinks it's not correct whether the input happens by manually or via datepicker the input field is still red highlighted.
This is the inputfield
<mat-form-field class="input-date">
<input id="search-form-field-input-date-from" matInput #date
[formControl]="dateFormControlFrom" required placeholder="Date (YYYY-MM-DD)"
[matDatepicker]="datePickerFrom"
pattern="^(?:d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
>
<mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
<mat-datepicker #datePickerFrom></mat-datepicker>
</mat-form-field>
validate function:
private validateFormInput(): boolean {
return this.dateFormControlFrom.valid;
}
what I also noticed when I do:
console.log(this.dateFormControlFrom.value)
I get the date like Fri Nov 16 2018 00:00:00 GMT+0100 not like 2018-11-16 how it actually looks in the input.
angular validation datepicker angular-material angular validation datepicker angular-material edited Nov 16 '18 at 9:18
Zooly
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
edited Nov 16 '18 at 9:18
Zooly
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
edited Nov 16 '18 at 9:18
Zooly
2,86132042
edited Nov 16 '18 at 9:18
Zooly
2,86132042
edited Nov 16 '18 at 9:18
Zooly
2,86132042
2,86132042
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
asked Nov 16 '18 at 7:47
WeStWeSt
2171517
2171517
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Can't you simply do in your validate function:return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.
– Zooly
Nov 16 '18 at 9:17
can you provide astackblitz.
– Farhat Zaman
Nov 16 '18 at 9:50
add a comment |
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Can't you simply do in your validate function:return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.
– Zooly
Nov 16 '18 at 9:17
can you provide astackblitz.
– Farhat Zaman
Nov 16 '18 at 9:50
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Can't you simply do in your validate function:
return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.– Zooly
Nov 16 '18 at 9:17
Can't you simply do in your validate function:
return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.– Zooly
Nov 16 '18 at 9:17
can you provide a
stackblitz.– Farhat Zaman
Nov 16 '18 at 9:50
can you provide a
stackblitz.– Farhat Zaman
Nov 16 '18 at 9:50
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333497%2fangular-material-datepicker-with-input-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333497%2fangular-material-datepicker-with-input-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It happens because matDatepicker binds a Date object, not a simple string as "AAA-MM-DD"
– Zooly
Nov 16 '18 at 8:16
Ok if I select it from the datepicker but also if I enter the date manually? Would't it be a simple string then?
– WeSt
Nov 16 '18 at 8:21
Can't you simply do in your validate function:
return typeof this.dateFormControlFrom.value.getMonth === 'function'. This should check if entered date is a date.– Zooly
Nov 16 '18 at 9:17
can you provide a
stackblitz.– Farhat Zaman
Nov 16 '18 at 9:50