CODEWITHSUNDEEP
javascriptangularjsdatetimeangular-ui-bootstrapdatetimepicker
panagulis72
panagulis72

Reputation: 2169

Leave only the choice of time in Datetime-picker in AngularJS

I'm using AngularJS and I want to divide a datetime-picker in two parts. By default, where you open the calender, you have to choose the day and then the time (hours and minutes). I want to make two datetime-picker, one for the day and one for the hours/minutes. I tried to change this, in the first form:

 datetime-picker="dd/MM/yyyy HH:mm"

into 

 datetime-picker="HH:mm"

but it doesn't work.

The problem is that if you click on the first calendar to open the first datetime, it makes you choose the date before the time. Instead, I would like to choose only hours and minutes.

This is the plunker: https://plnkr.co/edit/BLPsNszpUWjXuHXaj7hO?p=preview

Upvotes: 3

Views: 3361

Answers (1)

NiK648
NiK648

Reputation: 1486

You are using the datetimepicker component from this repo: https://github.com/Gillardo/bootstrap-ui-datetime-picker. It is mentioned in the documentation that you can use the following attributes:

enableDate - Whether you would like the user to be able to select a date. Defaults to true.
enableTime - Whether you would like the user to be able to select a time. Defaults to true.

So if you want to hide date picker part in the component, add enable-date="false" to your input field. Like this:

<input type="text" class="form-control" datetime-picker="HH:mm" enable-date="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

Similarly, to hide the timepicker part in the component, add enable-time="false" to your input field. Like this:

<input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

Here is the update plunker: https://plnkr.co/edit/luMPl8aOFkzBuW4BeNkx?p=preview. Hope this helps.

Upvotes: 1

Related Questions