本文内容 项目结构 AngularJS datepicker AngularJS+jQueryUI datetimepicker 本文介绍 AngualrJS datetimepicker 控件，有两种控件：Angualr 官网提供的 datepicker，以 ...
本文内容
- 项目结构
- AngularJS datepicker
- AngularJS+jQueryUI datetimepicker
本文介绍 AngualrJS datetimepicker 控件，有两种控件：Angualr 官网提供的 datepicker，以及 Angular+jQueryUI 的 datetimepicker。搞了好几天，总算跟项目集成在一起。
其实，Angular 官方提供了一套控件 Angular-ui-bootstrap ，放在 Github 上。但是，里面只有 datepicker 控件，而没有 datetimepicker，也就是说，只能选择日期，不能选择时间。比较愁人，不知道 Angular 团队是怎么想得？难道国外，没有选择时间的需求吗。
另外，Github 的 dalelotts/angular-bootstrap-datetimepicker 这个日期控件，也不错，它也是基于 Angular-ui-bootstrap 写的，但是跟我项目集成时，遇到点问题。总体感觉，此控件写得过于啰嗦，除了需要 Angular-ui-boostrap 外，还有作者自己的三个 js 文件（也可以说一个，其他两个也是 angular 提供的）。可是，初始化控件时，作者使用了匿名函数，这样的写法跟 angular 显得不太一致，我是刚接触 angular，有点不能领悟作者的意思~
Angular 之初认为，单独提供一组控件，时间上来不及，与其这样，不如能将现成的、成熟的东西集成到 Angular 里。因此，现在看来，Angular+jQueryUI 的组合是相当合适的，而且相关 Angular 资料，有单独介绍如何利用 Angular 里封装 jQueryUI~
Github Demo
项目结构
图 1 项目结构
AngularJS datepicker
图 2 Angular-ui-bootstrap datepicker
index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Angular Bootstrap - Date Picker Demo</title>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="dateDemo">
<div class="row">
<div class="col-md-4">
<div class="h2">Angular 日期控件</div>
</div>
</div>
<div class="row">
<h3>选择日期：{{myDate | date:'fullDate'}}</h3> </div>
<div class="row">
<div class="col-md-4" style="background: #fff;">
<h4>內置日期</h4>
<!-- angular datepicker -->
<datepicker ng-model="myDate" min-date="minDate" show-weeks="false"
class="wellwell-sm"></datepicker>
<!-- 说明：ng-model 绑定dt模块 ， min-date 最少日期，show-weeks= ture 显示周 -->
</div>
<div class="col-md-4">
<div class="row">
<h4>非內置日期</h4>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{myDefaultDateFormat}}" ng-model="myDate" is-open="opened" min-date="minDate" max-date="'2016-12-30'"
datepicker-options="dateOptions"
date-disabled="disabled(date,mode)" ng-required="true"
close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="row">
<label for="">日期格式</label> <select class="form-control"
ng-model="myDefaultDateFormat"
ng-options="f for f in myDateformats"><option value=""></option></select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-9">
<button type="button" class="btn btn-info btn-sm" ng-click="today()">今天</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="myDate='2008-08-08'" tooltip="Set date to 2008-08-08">设置</button>
<button type="button" class="btn btn-sm btn-danger"
ng-click="clear()" tooltip="Clear">清除</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="toggleMin()" tooltip="After today restriction">限制</button>
</div>
</div>
</div>
<script src='/images/loading.gif' data-original="vendor/angular/angular.js"></script>
<script
src='/images/loading.gif' data-original="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src='/images/loading.gif' data-original="src/js/mydate.js"></script>
</body>
</html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：AngularJS datepicker 和 datatimepicker
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
