最后样式

html

.input-group(style="max-width:150px")

    input.form-control(uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions"  ng-required="true" close-text="关闭" current-text="今天" alt-input-formats="altInputFormats" clear-text='清除')
span.input-group-btn
span.btn.btn-default(ng-click="open()")
i.glyphicon.glyphicon-calendar

  

js

angular.module("app")
.directive('timePicker', ["$rootScope", function($rootScope) {
// Runs during compile
return { scope: {
dt: "=model" //显示列表头部th信息,及绑定的内容 }, // {} = isolate, true = child, false/undefined = no change
controller: ["$scope", "$element", "$attrs", "$transclude", function($scope, $element, $attrs, $transclude) {
// console.log($scope);
$scope.today = function() {
$scope.dt = new Date();
};
if(!$scope.dt){
// $scope.today();
}
// $scope.inlineOptions = {
// customClass: getDayClass,
// minDate: new Date(),
// showWeeks: true
// }; $scope.dateOptions = {
//dateDisabled: true,
formatYear: 'yy',
//maxDate: new Date(2020, 5, 22),
//minDate: new Date(),
startingDay: 1,
formatDayHeader:'EEE',
showWeeks:false
}; $scope.open = function() {
$scope.popup1.opened = true;
}; $scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
}; $scope.format = 'yyyy-MM-dd';
$scope.altInputFormats = ['M!/d!/yyyy']; $scope.popup1 = {
opened: false
}; $scope.popup2 = {
opened: false
}; var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0); for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
} return '';
} }],
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'AE', // E = Eleme nt, A = Attribute, C = Class, M = Comment
// template: '',
templateUrl: 'app/dist/directive/timepicker/date.html',
// replace: true,
//transclude: true,
link: function(scope, element, c, d, transclude) {
// console.log(scope)
// scope.Fn=scope.Fn&&scope.Fn(scope)||{}; } };
}]);

  

angular.js的时间指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  3. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. angular.js的ng-app 指令定义一个 AngularJS 应用程序。

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

  5. angular.js的表格指令

    html div.col-sm-12 table.table.table-bordered.table-condensed.table-hover.table-striped.dataTable.no ...

  6. angular.js创建自定义指令-demo3

    html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...

  7. Angular JS中$timeout的用法及其与window.setTimeout的区别

    $timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...

  8. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  9. 史上最全的Angular.js 的学习资源

    Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...

随机推荐

  1. java设计模式之职责链模式

    责任链模式 设计模式很多时候都是看见名字都知道意思,责任链,见名知义为请求创建一系列处理对象. 此模式基于请求的类型将请求的发送方和接收方分离.通常每个接收器包含对另一个接收器的引用.如果一个对象不能 ...

  2. PuTsangTo-单撸游戏开发04 给角色添加基本动画

    一. 跳跃与移动的优化与完善 先给上一次的内容做一次补救,也就是上一次中还留存的,由于键盘按键事件的第一次回调与后续回调之间会间隔个小半秒带来的跳跃落地后动作延迟的情况. 最终的键盘按下回调的处理代码 ...

  3. Servlet3.0新特性使用详解

    可插拔的Web框架 几乎所有基于Java的web框架都建立在servlet之上.现今大多数web框架要么通过servlet.要么通过Web.xml插入.利用标注(Annotation)来定义servl ...

  4. 每天学点Java小知识【1】

    一 Java标识符和关键字 1.标识符 作用:用来标识类名.变量名.方法名.类型名.数组名.文件名的有效字符序列. 组成规则:由字母.下划线.美元符号和数字组成,且第一个字符不能是数字字符.注意:标识 ...

  5. Wireless Intranet Captive Portal

    Wireless Intranet Captive Portal 配置AAA服务Radius认证 radius-server key 0 radius radius-server authentica ...

  6. 【G】开源的分布式部署解决方案文档 - Web Deploy

    G.系列导航 [G]开源的分布式部署解决方案 - 导航 微软官方部署方式 右键项目->发布 这个大家应该再熟悉不过,在部署前有个预览界面可以看本次更新到底更新哪些文件. 既然它可以预览部署结果, ...

  7. Spring实战——缓存

    缓存 提到缓存,你能想到什么?一级缓存,二级缓存,web缓存,redis-- 你所能想到的各种包罗万象存在的打着缓存旗号存在的各种技术或者实现,无非都是宣扬缓存技术的优势就是快,无需反复查询等. 当然 ...

  8. [洛谷P2580]于是他错误的点名开始了

    洛谷P2580的一个水题,用啥都能过,不过为了练习一下刚刚学会的字典树,还是认真做一下吧. #include <cstdio> #include <cstring> using ...

  9. 火车站点城市查询(appserv 服务器练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. [.NET] 《Effective C#》读书笔记(二)- .NET 资源托管

    <Effective C#>读书笔记(二)- .NET 资源托管 简介 续 <Effective C#>读书笔记(一)- C# 语言习惯. .NET 中,GC 会帮助我们管理内 ...