Topic: Angular 9.4.0 Timepicker 24 Hour Clock
C-Contract priority asked 4 years ago
I am using MDB Angular Pro 9.4.0 and I was trying to set up a time picker to be a 24 hour clock. However the current documentation doesn't state how do so (https://mdbootstrap.com/docs/angular/forms/time-picker/). I have looked at the forums and across google but all those implementations don't work for me. Every time I click the little clock icon in my input it just pops up the 12 hour clock. Am I missing something or is no longer possible?
My code in app.component.html
<div>
<div class="md-form">
<input
mdbInput
type="text"
id="form1"
class="form-control"
[mdbTimePicker]="timepicker"
/>
<label for="form1">Example label</label>
<mdb-timepicker-toggle [mdbTimePickerToggle]="timepicker"></mdb-timepicker-toggle>
<mdb-timepicker #timepicker [twelvehour]="false"></mdb-timepicker>
</div>
</div>
My code in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
import { MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule, TimePickerModule, DatepickerModule, RangeModule, StepperModule, TabsModule, ChipsModule, MDBBootstrapModulePro } from 'ng-uikit-pro-standard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ChipsModule,
TimePickerModule,
DatepickerModule,
RangeModule,
StepperModule,
ToastModule.forRoot(),
TabsModule.forRoot(),
MDBBootstrapModulesPro.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
apiKey: 'api_key_hidden'
})
],
providers: [MDBSpinningPreloader],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
Let me know if you need to know anything else from me.
Thank you, Zach
Arkadiusz Idzikowski staff answered 4 years ago
I think the problem is caused by a typo in the input name, it should be [twelveHour]
instead of [twelvehour]
.
C-Contract priority commented 4 years ago
Dang it, I hate it when I do stuff like that! I could have swore I copied that tag from other peoples code and still did not work, but fixing the typo as you said made it work. So thank you!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Desktop
- Browser: Firefox
- OS: PC
- Provided sample code: No
- Provided link: Yes