Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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