Comments (6)
I am also, having the same problem. Not sure if it helps, but if I use template driven forms and ngModel the time is set correctly. However using reactive forms does not work.
Note, I am seeing this when running angular 8 and timepicker 3.0.1 (docs mention this is compat w/ 8)
https://stackblitz.com/edit/angular-material-datetimepicker-issue-yuhskn
from mat-datetimepicker.
For anybody intrerested, I worked around this by forcing the value of the input element to the correct format in the afteViewInit lifecycle hook.
Example code:
time = new FormControl(moment());
@ViewChild('timeInput') // reference to the input
timeInput: ElementRef;
ngAfterViewInit() {
if (type === 'time' && this.time.value) {
this.timeInput.nativeElement.value = (this.time.value as moment.Moment).format('HH:mm');
}
}
from mat-datetimepicker.
I can not reproduce this on master with either native or moment adapter. Using the sample app and setting time: [new Date(), Validators.required]
or time: new FormControl(moment())
.
Can you provide a sample?
from mat-datetimepicker.
I think I'm also having this issue on the 3.0.0 beta. I have essentially this setup:
<div fxLayout="column">
<mat-checkbox #hasStartTime formControlName="has_start_time (change)="onEnableStartTime(levelConfig, $event)">Start Time</mat-checkbox>
<div fxLayout="column" *ngIf="hasStartTime.checked">
<mat-form-field>
<input matInput placeholder="Start Time (UTC)" formControlName="start_time [matDatetimepicker]="startTimePicker" required autocomplete="false">
<mat-datetimepicker-toggle [for]="startTimePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true" timeInterval="5">
</mat-datetimepicker>
</mat-form-field>
</div>
</div>
onEnableStartTime(config: FormGroup, event: MatCheckboxChange) {
const startTimeCtrl = config.get('start_time')!;
if (event.checked && !startTimeCtrl.value.isValid()) {
startTimeCtrl.setValue(moment.utc());
}
}
In my case it starts invalid so the checkbox is not checked, but when I check the checkbox and the value becomes valid, it only shows the date until I click on the input to open the selector. Once that's open, the time displays alongside the date:
from mat-datetimepicker.
Same problem for me also.
from mat-datetimepicker.
I tried @JusuVh workaraound, but it is not fully cleared, I also actually have hide and show button for that field, when we toogle the input time field in ngIf, it is again showing the Date rather than time.
from mat-datetimepicker.
Related Issues (20)
- fix publish github action pipeline HOT 4
- Angular v13 Sass issue (SassError: Can't find stylesheet to import) HOT 12
- moment project is dependant on angular 13.1.1 instead of latest (13.2.1) HOT 3
- remove deprecated standard-version
- Upgrading to angular 14 HOT 2
- make Releases and CHANGELOG less-noisy and more readable HOT 3
- Unable to import @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss'; HOT 5
- Angular 15 not supported HOT 7
- BC released in a minor HOT 13
- ERROR Error: Cannot find control with unspecified name attribute HOT 3
- npm install --save @angular/material-moment-adapter mat-datetimepicker/moment HOT 1
- Can I select the seconds? HOT 1
- Suggestion to Add DateFns Support HOT 2
- Problem with dependecies for @mat-datetimepicker/moment with @angular/material HOT 1
- Support Angular 17 HOT 4
- Locale text
- Wrong Dependency on @mat-datetimepicker/moment HOT 2
- Can't update to Angular 18 HOT 5
- Selecting minutes in datetime popup window temperamentally does not select HOT 1
- Incorrect date is selected after selecting an hour in twelve-hour mode by keyboard
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mat-datetimepicker.