ADM-dateTimePicker 开源项目教程

最新推荐文章于 2024-08-25 09:31:36 发布

杨洲泳Egerton

最新推荐文章于 2024-08-25 09:31:36 发布

阅读量228

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01106/article/details/141518115

版权

ADM-dateTimePicker 开源项目教程

ADM-dateTimePickerPure AngularJs dateTimePicker项目地址:https://gitcode.com/gh_mirrors/ad/ADM-dateTimePicker

项目介绍

ADM-dateTimePicker 是一个纯 AngularJS 的日期时间选择器，支持公历（Gregorian）和波斯历（Jalali）。该项目由 Amirkabir Data Miners 开发，旨在提供一个简单易用的日期时间选择解决方案。

项目快速启动

安装

首先，通过 npm 或 bower 安装 ADM-dateTimePicker：

npm install adm-dtp
# 或者
bower install adm-dtp

引入文件

在您的应用中引入必要的文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="css/ADM-dateTimePicker.css" />
    <script src="js/angular.min.js"></script>
    <script src="js/ADM-dateTimePicker.min.js"></script>
</head>
<body>
    <!-- 您的内容 -->
</body>
</html>

注入模块

在您的 AngularJS 应用中注入 ADM-dateTimePicker 模块：

var app = angular.module('myApp', ['ADM-dateTimePicker']);

使用指令

在 DOM 元素中添加 adm-dtp 指令：

<adm-dtp ng-model="date"></adm-dtp>

应用案例和最佳实践

设置选项

您可以为整个应用设置选项：

app.config(['ADMdtpProvider', function(ADMdtp) {
    ADMdtp.setOptions({
        calType: 'gregorian',
        format: 'YYYY/MM/DD hh:mm',
        default: 'today'
    });
}]);

事件处理

您可以监听日期时间选择器的事件：

<!-- 在输入变化时触发 -->
<adm-dtp ng-model="date" on-change="change(date)"></adm-dtp>
<!-- 在选择日期时触发 -->
<adm-dtp ng-model="date" on-datechange="dateChanged(date)"></adm-dtp>
<!-- 在选择时间时触发 -->
<adm-dtp ng-model="date" on-timechange="timeChanged(date)"></adm-dtp>