最后样式

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. React-Native 之 项目实战(三)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  2. aps.net验证控件的异常处理

    异常错误信息: WebForms UnobtrusiveValidationMode 需要"jQuery"ScriptResourceMapping.请添加一个名为 jquery ...

  3. js实现文本框溢出文字用省略号(...)表示

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

  4. 如何通过 HSB 颜色模式构建夜间模式

    中国睡眠研究会发布的<2017 年中国青年睡眠现状报告>显示,大约 90% 的人在睡前离不开电子产品. 不知道大家有没有感觉到普通的亮色界面会让我们在夜间使用的时侯感到刺眼,长时间使用会感 ...

  5. SystemVerilog搭建验证平台使用DPI时遇到的问题及解决方案

    本文目的在于分享一下把DPI稿能用了的过程,主要说一下平台其他部分搭建好之后,在完成DPI相关工作阶段遇到的问题,以及解决的办法. 工作环境:win10 64bit, Questasim 10.1b ...

  6. 对MySQL数据量日益增长产生的一点小想法

    最近一直在想一个问题 MySQL数据量日益庞大,目前单表总记录数有 300W+,导致sql语句执行的速度变慢,如果一直这样增长下去,总有一天会爆炸的.怎么办??怎么办?? 第一:想到的必然是 添加索引 ...

  7. DataTable 转实体

    因为Linq的查询功能很强大,所以从数据库中拿到的数据为了处理方便,我都会转换成实体集合List<T>. 开始用的是硬编码的方式,好理解,但通用性极低,下面是控件台中的代码: using ...

  8. hadoop、Storm该选哪一个

    如果hadoop.Storm还感觉混要,那么此篇文章将帮助你把他们完全区分 可以带着下面问题来阅读本文章: 1.hadoop.Storm各是什么运算 2.Storm为什么被称之为流式计算系统 3.ha ...

  9. SSH整合总结(xml与注解)

    本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 一.使用XML配置: SSH版本 Struts-2.3.31 Spring-4.3.5 Hibernate-4.2.21 引入ja ...

  10. python scrapy 抓取脚本之家文章(scrapy 入门使用简介)

    老早之前就听说过python的scrapy.这是一个分布式爬虫的框架,可以让你轻松写出高性能的分布式异步爬虫.使用框架的最大好处当然就是不同重复造轮子了,因为有很多东西框架当中都有了,直接拿过来使用就 ...