扩展 angular ui-bootstrap timepicker 支持秒功能

ui-bootstrap timepicker 只支持选择时分,但由于公司需要选择到秒, 可是又没有找到angular 相关的插件。索性就在 ui-bootstrap timepicker  的基础上扩展了一个。

 

1. 首先创建我们的 template.js 文件 ，这个文件就是存放我们扩展的模板。 代码如下
   

    1 angular.module('myTemplate', ['template/timepicker/mytimepicker.html']);
    2 
    3 angular.module("template/timepicker/mytimepicker.html", []).run(["$templateCache", function ($templateCache) {
    4     $templateCache.put("template/timepicker/mytimepicker.html",
    5     "<table>\n" +
    6     "  <tbody>\n" +
    7     "    <tr class=\"text-center\" ng-show=\"::showSpinners\">\n" +
    8     "      <td><a ng-click=\"incrementHours()\" ng-class=\"{disabled: noIncrementHours()}\" class=\"btn btn-link\" ng-disabled=\"noIncrementHours()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-up\"></span></a></td>\n" +
    9     "      <td>&nbsp;</td>\n" +
   10     "      <td><a ng-click=\"incrementMinutes()\" ng-class=\"{disabled: noIncrementMinutes()}\" class=\"btn btn-link\" ng-disabled=\"noIncrementMinutes()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-up\"></span></a></td>\n" +
   11     "       <td>&nbsp;</td>\n" +
   12     "      <td><a ng-click=\"incrementSeconds()\" ng-class=\"{disabled: noIncrementSeconds()}\" class=\"btn btn-link\" ng-disabled=\"noIncrementSeconds()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-up\"></span></a></td>\n" +
   13     "      <td ng-show=\"showMeridian\"></td>\n" +
   14     "    </tr>\n" +
   15     "    <tr>\n" +
   16     "      <td class=\"form-group\" ng-class=\"{'has-error': invalidHours}\">\n" +
   17     "        <input style=\"width:50px;\" type=\"text\" ng-model=\"hours\" ng-change=\"updateHours()\" class=\"form-control text-center\" ng-readonly=\"::readonlyInput\" maxlength=\"2\" tabindex=\"{{::tabindex}}\">\n" +
   18     "      </td>\n" +
   19     "      <td>:</td>\n" +
   20     "      <td class=\"form-group\" ng-class=\"{'has-error': invalidMinutes}\">\n" +
   21     "        <input style=\"width:50px;\" type=\"text\" ng-model=\"minutes\" ng-change=\"updateMinutes()\" class=\"form-control text-center\" ng-readonly=\"::readonlyInput\" maxlength=\"2\" tabindex=\"{{::tabindex}}\">\n" +
   22     "      </td>\n" +
   23      "      <td>:</td>\n" +
   24     "      <td class=\"form-group\" ng-class=\"{'has-error': invalidSeconds}\">\n" +
   25     "        <input style=\"width:50px;\" type=\"text\" ng-model=\"seconds\" ng-change=\"updateSeconds()\" class=\"form-control text-center\" ng-readonly=\"::readonlyInput\" maxlength=\"2\" tabindex=\"{{::tabindex}}\">\n" +
   26     "      </td>\n" +
   27     "      <td ng-show=\"showMeridian\"><button type=\"button\" ng-class=\"{disabled: noToggleMeridian()}\" class=\"btn btn-default text-center\" ng-click=\"toggleMeridian()\" ng-disabled=\"noToggleMeridian()\" tabindex=\"{{::tabindex}}\">{{meridian}}</button></td>\n" +
   28     "    </tr>\n" +
   29     "    <tr class=\"text-center\" ng-show=\"::showSpinners\">\n" +
   30     "      <td><a ng-click=\"decrementHours()\" ng-class=\"{disabled: noDecrementHours()}\" class=\"btn btn-link\" ng-disabled=\"noDecrementHours()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-down\"></span></a></td>\n" +
   31     "      <td>&nbsp;</td>\n" +
   32     "      <td><a ng-click=\"decrementMinutes()\" ng-class=\"{disabled: noDecrementMinutes()}\" class=\"btn btn-link\" ng-disabled=\"noDecrementMinutes()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-down\"></span></a></td>\n" +
   33      "      <td>&nbsp;</td>\n" +
   34     "      <td><a ng-click=\"decrementSeconds()\" ng-class=\"{disabled: noDecrementSeconds()}\" class=\"btn btn-link\" ng-disabled=\"noDecrementSeconds()\" tabindex=\"{{::tabindex}}\"><span class=\"glyphicon glyphicon-chevron-down\"></span></a></td>\n" +
   35     "      <td ng-show=\"showMeridian\"></td>\n" +
   36     "    </tr>\n" +
   37     "  </tbody>\n" +
   38     "</table>\n" +
   39     "");
   40 }]);

   View Code