timepicker

[ProLoser]

Normally I wouldn't say anything, but I was looking at the timepicker and it's ridiculously easy to implement using native angular. I thought it might be worth taking a crack at to help appease the whiny people.

Something like...

  <input ui-mask="99:99 aa" ng-model="time" bs-time>
  <div class="popover show bottom">
    <div class="arrow"></div>
    <table class="form-inline">
      <tr class="text-center">
        <td><a ng-click="hours=hours+1" class="icon-chevron-up"></a></td>
        <td>&nbsp;</td>
        <td><a ng-click="minutes=minutes+1" class="icon-chevron-up"></a></td>
        <td>&nbsp;</td>
        <td><a ng-click="toggleMeridian()" class="icon-chevron-up"></a></td>
      </tr>
      <tr>
        <td><input class="span1 text-center" type="text" ng-model="hours" min="1"></td>
        <td>:</td>
        <td><input class="span1 text-center" type="text" ng-model="minutes" min="0"></td>
        <td>&nbsp;</td>
        <td><input class="span1 text-center" type="text" ng-model="meridian"></td>
      </tr>
      <tr class="text-center">
        <td><a ng-click="hours=hours-1" class="icon-chevron-down"></a></td>
        <td>&nbsp;</td>
        <td><a ng-click="minutes=minutes-1" class="icon-chevron-down"></a></td>
        <td>&nbsp;</td>
        <td><a ng-click="toggleMeridian()" class="icon-chevron-down"></a></td>
      </tr>
    </table>
  </div>

[bekos]

@ProLoser +1

Probably you would consider the +/- steps as attributes (default: 1)

[pkozlowski-opensource]

@ProLoser Dean, I can't believe I see this issue opened by you ;-) But I totally agree, it should be really simple to implement and would be a useful addition.

Any takers?

[bekos]

Probably a spinner directive for the inputs may come in handy before taking on this one.

[ProLoser]

Actually, a spinner is supported natively in most modern browsers and seems slightly less of a concern, no? In fact I originally had type=number but I realized there was an inconsistency with the buttons

Dean Sofer
DeanSofer.com
714.900.2254

On Friday, April 19, 2013 at 3:02 PM, Tasos Bekos wrote:

Probably a spinner directive for the inputs may come in handy before taking on this one.

—
Reply to this email directly or view it on GitHub (#332 (comment)).

[bekos]

@ProLoser I was thinking of a little bit more flexible spinner, that can loop & trigger events when overrides limits.

Anyway, this is a first attempt: http://plnkr.co/edit/Jiqg8kh1VboBaJP71CWF?p=preview

It uses a Date object as ng-model and can handle 12H / 24H toggle, hour/minute configurable steps, configurable meridian labels etc.

The other main feature is that every field is "connected" to each other. For example, if it is 11:00 AM and you click to add 10 minutes 6 times, the time will be 12:00 PM.

Inputs are readonly by default, until ng-keypress is part of the stable library, so I can handle up/down arrow keys and do proper validation.

Any suggestion to improve code or add features is welcomed :-)

[joshkurz]

really nice. If this could take in timestamps too then that would be nice.
+1

On Tue, Apr 23, 2013 at 10:59 AM, Tasos Bekos notifications@github.comwrote:

@ProLoser https://github.com/ProLoser I was thinking of a little bit
more flexible spinner, that can loop & trigger events when overrides limits.

Anyway this is a first attempt:
http://plnkr.co/edit/Jiqg8kh1VboBaJP71CWF?p=preview

It uses a Date object as ng-model and can handle 12H / 24H toggle,
hour/minute configurable steps, configurable meridian labels etc.

The other main feature is that every field is "connected" to each other.
For example, if it is 11:00 AM and you click to add 10 minutes 6 times,
the time will be 12:00 PM.

Inputs are readonly by default until ng-keypress is part of the stable
library, so I can handle up/down arrow keys and do proper validation.

Any suggestion to improve code or add features is welcomed :-)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/332#issuecomment-16863434
.

Josh Kurz
www.atlantacarlocksmith.com http://www.atlantacarlocksmith.com

[ProLoser]

I thought you were guys were going into a prefixed directive direction?

[ProLoser]

Add a mouse-scroll event.

[pkozlowski-opensource]

@ProLoser yeh, we need to add prefixes... There are just too many things to do, 60 open issues... Grr, we need more people for such projects... or some kind of sponsoring, otherwise we will never be able to move as fast as desired...

But coming back to prefixes - we need to add them, this is for sure. But now I would be curious to wait and see what comes out of the modules spec initiative.

[bekos]

Sorry, but what to you mean with prefixes?

[pkozlowski-opensource]

@bekos #157

[bekos]

@pkozlowski-opensource I see. This has to do with the whole library, right? Do you want to change something on this one?

[pkozlowski-opensource]

No, we will do this for the whole lib.

[bekos]

Updated example: http://plnkr.co/edit/pRCOLfKjmzplIxxkRGbg?p=preview

@joshkurz Thank you! About timestamps option now, I feel that since you pass a Date object you can create it in many ways in your controller. Perhaps, you can do:

$scope.time = new Date(1291656749000)

or

var d = new Date();
d.setHours(14);
d.setMinutes(25)
$scope.time = d;

I think there is no reason to pass this parsing responsibility into the timepicker directive. What do you think?

@ProLoser Added option mousewheel (default: true)