javascript

angularjs timepicker on bootstrap3

angularjs的ui-bootstrap，套用至bootstrap3，目前只能支援部份的元件。所以就自己實作了一個timepicker的元件，如下：

Dependency

  • boostrap3
  • angularjs

Support

  • IE8+
  • chrome
  • firefox

Install

用bower install

1
bower install ngTimepickerForBs3

Usage

include所需要的scripts和styles：

1
2
<link rel="stylesheet" href="bower_components/ngTimepickerForBs3/angularjs-timepicker.css"/>
<script type="text/javascript" src="bower_components/ngTimepickerForBs3/angularjs-timepicker.js"></script>

設定timepicker的model和初始值；

1
<div ng-timepicker-for-bs3 ng-model="test" ng-init="test={hours:23,mins:59}"></div>

載入ngTimepickerForBs3的module：

1
2
3
angular.module( "app", [
    "ngTimepickerForBs3"
]);