Search code examples
angulardatepickertime-format

Is it possible to change angular2-datepicker bigbanner timeformat?

We are using angular2-datepicker (https://www.npmjs.com/package/angular2-datetimepicker) in our project. We need to use 24 hour timeformat. But it looks like it does not work throughout the component.

In the screenshot below, you can see I can change the format in the field marked by 1., but not the format of the fields marked by 2. or 3.

You can see the settings im using here: https://angular-xsv9yq.stackblitz.io

Is this a bug in the component or am i missing a setting?

enter image description here

Solution

  • Since you are open to using alternative to angular2-datepicker you could use OwlDateTimePicker.

    From their Readme:

    1) Install with npm:

    npm install ng-pick-datetime --save

    2) Add styles. If you are using Angular CLI, you can add this to your styles.css:

    @import "~ng-pick-datetime/assets/style/picker.min.css";

    If you are not using the Angular CLI, you can include the picker.min.css via a element in your index.html.

    3) Add OwlDateTimeModule and OwlNativeDateTimeModule to your @NgModule like example below

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';

import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';

@NgModule({
    imports: [ 
        BrowserModule, 
        OwlDateTimeModule, 
        OwlNativeDateTimeModule,
    ],
    declarations: [ MyTestApp ],
    bootstrap:    [ MyTestApp ]
})
export class MyTestAppModule {}

    4) Connecting a picker to an input and a trigger.

    <input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
<owl-date-time #dt1></owl-date-time>

    or

    <input [owlDateTime]="dt2" placeholder="Date Time">
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt2></owl-date-time>

    Check out more examples here.