Timepicker about ng-bootstrap HOT 27 CLOSED

@sendilkumarn so I was just toying with different parts of the timepicker support and this is where I got: https://plnkr.co/edit/aIDYlK5lq58Tb6TvQ1kF?p=preview

It is still missing a lot of functionality (doesn't support any options you've listed, don't have proper formatting etc.) but I think this is a skeleton of where I would like it to go. If it makes sense for you could you turn it into a PR with proper code, tests and complete support for all the options?

Let me know if you've got any questions. @wesleycho might have some additional input as well.

from ng-bootstrap.

Moved from #242

Just documenting this so we don't lose it. Per issues (and @wesleycho) in UIBS library, we should manage the hours, minutes, and second fields separately and not use a date object to back the data. This does mean we need to handle the rolling ourselves, but I'm ok with that.

This also allows us to make a duration picker (using a common base) as well as people have asked for this in the UIBS library.

from ng-bootstrap.

Ideally it should have 3 text boxes and a button [ AM/PM ]. it should accept input as date-time right?
Is there any other things to be considered?

from ng-bootstrap.

it should accept input as date-time right?

Rather not, see my comment above.

Is there any other things to be considered?

Plenty... If you want to look into this one you should start with a design doc. See an example of a design doc and discussion we did for tooltips / popovers: #8 (comment)

from ng-bootstrap.

I think this docs I missed for scrollspy. I will do this one here.

from ng-bootstrap.

@pkozlowski-opensource something like this would do?

note: this will be my first doc. bare with if there are any errors :)

from ng-bootstrap.

@sendilkumarn, this doc is a really, really good start. Very nice work. As you mention at the end, we do need to be cognizant of the pain points and features desired (and not desired) from UIBS.

Some initial points (and I can add to the doc when I get into work):

• don't over-engineer the API. People think they want dozens of options until they have them and then it becomes overwhelming. It is also makes for a maintenance nightmare. (Look at the UIBS date picker if you want an example).
• we need to have a duration mode where the hours aren't limited.
• there should be 2-3 separate input (of type number?) fields. One for hours, minutes, and perhaps optional seconds).
• there should be three separate properties for these fields and they should be numbers. Let the user deal with converting their date object to hours minutes and or seconds. (We could even provide a utility but it has to be time zone agnostic - we do not want to have to deal with time zones if we can help it.)
• not sure how I feel about a meridian field. Someone please convince me.
• not sure how I feel about a step option, it sort of feels like bloat, but I could maybe see the value for the minutes field.

from ng-bootstrap.

don't over-engineer the API
duration mode

👍

2-3 separate input
three separate properties

exactly that has to be there.

timezone

lets stand out of it as far as we can.

meridian field / step option

Few of my applications, we used it with ui-bootstrap and the response is good for that. But yes agree their use case are not common. But I think this one we can add.

from ng-bootstrap.

Added duration-mode option. Please check the updated doc @

https://docs.google.com/document/d/1EAZ8oERx5dBRS3-T6xaqAZ2-PBAXaOvqhA-gRUxEAzA/edit#heading=h.97mxnaikvwpb

from ng-bootstrap.

Any reason the duration mode can't just be a directive like we do on alerts? If it's there it's implied that it's on, I don't think it needs to be an actual flag.

from ng-bootstrap.

Since we will be having few checks based on duration stuff, thought of having it as a flag.

from ng-bootstrap.

@sendilkumarn your document doesn't have rights properly set (I can't comment on it). Please push the right buttons so we all can collaborate on this doc.

Here are just few high-level remarks before I can comment on the doc:

• - not sure what you are proposing for time parsing / formatting. What a user would use as a model? A string? A data structure?
• - there are no details on integration with ngModel directive (time-pickers on inputs)
• - there is proposal for rendering (how do we render up / down arrows knowing that BS4 doesn't provide icons)

from ng-bootstrap.

One other remark: while working on design docs try to focus on usage (what do I need to do / write as a user and what happens when I interact with the control). Impl details are important but less so then the API.

from ng-bootstrap.

Have given edit access to @pkozlowski-opensource @Foxandxss

cannot find email of @icfantv . can help?

from ng-bootstrap.

@sendilkumarn left some comments in the doc. More importantly, though, the doc is missing essential elements listed before: #24 (comment)

from ng-bootstrap.

@pkozlowski-opensource I didn't quite get the third point in the comment?

I have added remaining comments in that document.

from ng-bootstrap.

I didn't quite get the third point in the comment?

Scratched this for now.

from ng-bootstrap.

This looks pretty solid as a step towards how it should work.

We still need to wrestle with validation, but I'm not sure if that's built into Angular's form controls yet.

from ng-bootstrap.

I agree with @wesleycho, this is a good first step. RE forms, don't forget they're supposed to be extracted out and I don't know if that means they're getting changed in the process or just moved. @robwormald may know...

from ng-bootstrap.

I'm trying to make timepicker display looks decent and I'm not getting great results... This is where it starts to resemble timepicker but we would have to make it sleek: https://plnkr.co/edit/ipxNLJGIXAAsVOVP60DK?p=preview

Could anyone give me a hand with this?

from ng-bootstrap.

This implementation has the timepicker in a popup which I think is less obtrusive and follows the datepicker implementation.

from ng-bootstrap.

I will :)

Aligned Plunk

via input group

using buttons - similar to UIB

One more Type

from ng-bootstrap.

@RobJacobs I saw this one but:

• it is based on BS3
• doesn't look that great...

@sendilkumarn thinx for the proposals. There are some interesting ideas but IMO buttons look kind of gross.... We need a light, beautiful design (and I know that "beautiful" is highly subjective....)

from ng-bootstrap.

@pkozlowski-opensource I agree on the look, but wanted to suggest using a popup for displaying the inputs with buttons. I've run into issues trying to keep other input fields horizontally aligned with the timepicker. If you like the concept of the poup, I can mock something up in a plunk.

from ng-bootstrap.

@RobJacobs not sure what you mean by "popup" (did you mean popover???) but please put your ideas in a plunk - will be easier to discuss.

from ng-bootstrap.

Initial version of timepicker just landed via 6fcaea5 and f438899.

@icfantv feel free to send PR(s) to any remaining look & feel changes you would like to introduce.

from ng-bootstrap.

@pkozlowski-opensource roger that.

from ng-bootstrap.