什么是 mi-angular-date-range-picker？
mi-angular-date-range-picker 是一个面向 AngularJS 的日期范围选择器 npm 包，它可以让你在前端轻松地实现日期范围选择功能。
如何使用 mi-angular-date-range-picker？
安装
安装 mi-angular-date-range-picker 其实非常简单，只需要在命令行中执行以下命令即可：
$ npm install mi-angular-date-range-picker --save
引入
在你的 AngularJS 应用中引入下面两个文件：
<link rel="stylesheet" href="bower_components/mi-angular-date-range-picker/src/css/angular-date-range-picker.css"> <script src="bower_components/mi-angular-date-range-picker/src/js/moment.js"></script> <script src="bower_components/mi-angular-date-range-picker/src/js/angular-date-range-picker.js"></script>
使用
mi-angular-date-range-picker 暴露了一个名为 dateRangePicker 的指令，你可以使用它轻松地在你的应用中添加日期范围选择器。
在你的 HTML 中引用该指令：
<date-range-picker ng-model="dateRange"></date-range-picker>
其中，dateRange 是绑定的日期范围数据。
实际例子
HTML
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
-------------------------------------------
----- ---------------- -------------------------------------------------------------------------------------------
-------
----- -------------------------
---------- ----- --- --- ----------
---- ----------------- ---------------------------
-------- ----------
--------- -- ------------------- - ----------------- ------
------- -- ----------------- - ----------------- ------
------- ------------------------------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ---------------------
-------------------------- ---------------- -
---------------- - -
---------- -------------------- --------
-------- --------------- -------
--
---
---------
-------
-------JavaScript
var app = angular.module('myApp', ['dateRangePicker']);
app.controller('MainCtrl', function($scope) {
$scope.dateRange = {
startDate: moment().subtract(1, "days"),
endDate: moment().add(1, "days")
};
});总结
mi-angular-date-range-picker 是一个非常有用的日期范围选择器 npm 包，使用起来非常简单。通过本文，你了解了如何在你的 AngularJS 应用中使用它，前端工程师可以在今后的项目中轻松使用它来实现日期范围功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f461d8e776d08040f87