head部分:

<!--Bootstrap-->
<link rel="stylesheet" href="/supProdom/script/bootstrap/dist/css/bootstrap.min.css" />
<script src="/supProdom/script/bootstrap/dist/js/bootstrap.min.js "></script>
<!--plugin : bootstrap timepicker-->
<link rel="stylesheet" href="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
<script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="/supProdom/script/js/Addsup.js"></script>
<script src="/supProdom/script/js/js/controller.js"></script>
<script src="/supProdom/script/js/js/CincoJiang.js"></script>

html部分

body ng-app="myApp" ng-controller="addCtrl">
<form id="form@Form">
<table class="table table-hover" >

<tr>
<td width="10%" align="right" class="control-label">成立日期:</td>
<td>
<div class="form-group">
<div ng-model='timepickerTest' ng-time class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" ng-model="input" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input" value="" /><br/>
</div>
</td>

</tr>

</table>

js代码:

  Addsup.js:

var supModule = angular.module('myApp', [ 'app.controllers',
'app.directives']);
supModule.controller('addCtrl', ['$scope', function ($scope) {

}]);

controller.js

angular.module('app.controllers', [])

.controller('appCtrl',['$scope',function ($scope) {
$scope.test = 'test';
console.log($scope.test);
}]);

CincoJiang.js:

'use strict';

angular.module('app.directives', [])
.directive('ngTime', function() {
return {
restrict : 'A',
require : '?ngModel',
link : function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) {
return;
}
$('.form_date').datetimepicker({
language: "zh-CN",
format:"yyyy-mm-dd",
todayBtn:true,
clearBtn:false,// 自定义属性,true 显示 清空按钮 false 隐藏 默认:true
startView:2,
minView:2,
weekStart: 1,
todayHighlight: 1,
autoclose: 1,
forceParse: 0
});
},
};
});

angular--bootstrap实例日期控件【datepicker】的更多相关文章

  1. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  2. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  3. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  4. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  5. 日期控件 DatePicker 在ie8不能用

    过个年,日期控件DatePicker在ie8下突然不能用了,程序也没升级,很是奇怪. 把ie8的“禁用脚本调试”去掉,再次运行,发现提示有脚本错误. 想着可能是兼容性问题,于是把兼容性视图打开运行,还 ...

  6. 日期控件datepicker的使用

    引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js ...

  7. android 日期控件 DatePicker

    DatePicker的缺陷 提供的API太少,没办法个性化定制.比如,不能指定某部分的颜色,不能控制显示的部分等. xml中提供的属性太少,同样影响定制化. 兼容性问题太多,在4.x,5.x和6.0+ ...

  8. bootstrap 模态框日期控件datepicker被遮住问题的解决

    找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

  9. 使用日期控件datePicker,阻止移动端的自动调取键盘的事件

    方法:简单来说就是阻止input的默认事件. 因为datePicker就是用input来封装的,所以直接阻止input的输入事件就ok: 很简单,把input field属性readonly设置为tr ...

随机推荐

  1. iOS应用崩溃日志分析-备用

    作为一名应用开发者,你是否有过如下经历?   为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应用商店后,还是有用户抱怨会闪退 ! ...

  2. ubuntu 下GIT的安装

    linux下软件的安装方式有多种,最简单的莫过于从软件中心直接安装了或者用命令行直接安装 sudo apt-get install git 但是这样的安装却使我们体会不到最新版本的功能,如果我们想要体 ...

  3. Loading Cargo

    Loading Cargo "Look Stephen, here's a list of the items that need to be loaded onto the ship. W ...

  4. linq 跨库查询

    可以用多个DBContext,例如有DBContext1和DBContext2,但是不能将两个DBContext用在同一个查询中,可以分开,先用一个查出结果集1,再在第二个查询中使用结果集1就可以了

  5. OpenCV的矩阵合并方法

    有的时候我们需要将几个矩阵按行或者按列进行合并成一个大矩阵,这在Matlab里面非常的简单,但在OpenCV里面并没有这样的方法,现在我在OpenCV的源码里面发现合并矩阵的方法,分享给大家. A = ...

  6. mysql c haracter

    基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encoding ...

  7. MVC中使用EF(2):实现基本的CRUD功能

    MVC中使用EF(2):实现基本的CRUD功能 By  Tom Dykstra |July 30, 2013 Translated by litdwg   Contoso University示例网站 ...

  8. c语言结构体数组定义的三种方式

    struct dangdang { ]; ]; ]; int num; int bugnum; ]; ]; double RMB; int dangdang;//成员名可以和类名同名 }ddd[];/ ...

  9. poj 2566 Bound Found(尺取法 好题)

    Description Signals of most probably extra-terrestrial origin have been received and digitalized by ...

  10. 为人们服务的asp.net 验证控件

    ASP.NET是微软推出的WEB开发工具,他有很强大的功能,今天看视频讲到验证控件这一部分,真的感受到了微软全心全意为人民服务了.越来越佩服微软了,人家都设计出来了,咱们一定要会用才可以啊,不然太…. ...