扩展datepicker的功能(ui bootstrap)

san*_*eam 5 angularjs angularjs-directive angular-ui-bootstrap

我正在尝试为datepicker扩展ui bootstrap的功能.我想使用一个我已经为其他元素制作的可拖动指令,所以我可以拖延时间.(最终的功能是将该日期分配给某些任务).对我来说最理想的是不修改ui bootstrap库.我试图在datepicker的最终html中插入指令然后使用编译,但我不能使它工作.

有谁能够帮我?非常感谢你

小智 0

如果您想要一个更强大的日期选择器,您可以使用Dan Grossman 的 DateRangePicker

在此输入图像描述

您还可以使用 Angular 的一个很好的实现。

https://www.npmjs.com/package/angular-daterangepicker

只需将库注入到您的角度模块中即可。

App = angular.module('app', ['daterangepicker']);
Run Code Online (Sandbox Code Playgroud)

然后在控制器中声明一个模型。

exampleApp.controller('TestCtrl', function () {
  var vm = this;
  vm.datePicker.date = {
    startDate: null,
    endDate: null
  };
}
Run Code Online (Sandbox Code Playgroud)

最后在您的视图中使用该指令。

<div ng-controller="TestCtrl as ctrl">
  <input date-range-picker class="form-control date-picker" type="text" ng-model="ctrl.datePicker.date" />
</div>
Run Code Online (Sandbox Code Playgroud)