扩展 datepicker 的功能（ui bootstrap）

Posted 2023-02-19

【中文标题】扩展 datepicker 的功能（ui bootstrap）

【英文标题】：extend the functionality of datepicker (ui bootstrap)

【发布时间】：2014-02-09 12:57:02

【问题描述】：

我正在尝试为 datepicker 扩展 ui bootstrap 的功能。我想使用我已经为其他元素制作的可拖动指令，所以我可以拖动日子。 （最终的功能是将该日期分配给某些任务）。对我来说理想的是不要修改 ui 引导库。我试图在 datepicker 的最终 html 中插入指令，然后使用编译，但我无法使其工作。

有人可以帮助我吗？非常感谢

【问题讨论】：

你能分享一些代码吗？ Html 和任何 JS 尝试

这实际上应该不是很困难，因为您已经有了可拖动性的指令。只需自定义日期选择器模板。

【参考方案1】：

如果您想要更强大的日期选择器，您可以使用Dan Grossman's DateRangePicker。

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

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

只需将库注入到您的 Angular 模块中。

App = angular.module('app', ['daterangepicker']);

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

exampleApp.controller('TestCtrl', function () 
  var vm = this;
  vm.datePicker.date = 
    startDate: null,
    endDate: null
  ;

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

<div ng-controller="TestCtrl as ctrl">
  <input date-range-picker class="form-control date-picker" type="text" ng-model="ctrl.datePicker.date" />
</div>