5

I'm using this datetime picker :- https://www.npmjs.com/package/angular2-datetimepicker
Official document link :- https://cuppalabs.github.io/angular2-datetimepicker/#/datetimepicker.

Now, I have successfully implement it. It's perfectly working but time picker is not showing. As per their document I have set timepicker:false as well as timepicker:true.

In component.ts file.

date: Date = new Date();
settings = {
    bigBanner: true,
    format: 'dd-MMM-yyyy hh:mm a',
    defaultOpen: true
}

In component.html file.

 <angular2-date-picker [(ngModel)]="date" [settings]="settings"></angular2-date-picker>

Screen Shot.

enter image description here

Edit :- I think the problem is that setting object is not working from .ts file because if I remove the setting object then also it's only showing date.

2 Answers 2

6

This will work as an object from the .ts file. Notice that your HTML file contains a line that your .ts file is missing. The "timePicker: true" line is absent in your .ts settings. So your final settings object in that .ts file should look like this:

settings = {
    bigBanner: true,
    format: 'dd-MMM-yyyy hh:mm a',
    defaultOpen: true,
    timePicker: true
}

As an aside, disabling the bigBanner option with "bigBanner: false" automatically disables the timePicker in this tool. I notice that your's is enabled, but thought it was worth mentioning if others find this solution looking for other reasons that their timePicker is not displaying.

3

I figure out the problem some how setting object is not working from .ts file. So, I have changed it like

<angular2-date-picker [(ngModel)]="date" [settings]="{
        bigBanner: true,
        timePicker: true,
        format: 'dd-MMM-yyyy hh:mm a'
    }"></angular2-date-picker>

And it's working.

Note :- I have tried 4-5 datetime pickers in Angular-5 and this is the only datetime picker which is working. So we can use it.

3
  • I am trying to implement this datetime picker in a form, but every time I got to set the time, it submits the form. What's the best way around this?
    – jmckie
    Commented Nov 22, 2018 at 5:03
  • @jmckie. I think the problem is with your handling event because If you use ngModel then page won't get refresh or submit the form.
    – Bhavin
    Commented Dec 11, 2018 at 8:42
  • @Bhavin how can I set min date? Commented May 21, 2020 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.