angular--bootstrap实例日期控件【datepicker】
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】的更多相关文章
- bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
- jQuery UI 日期控件--datepicker
在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...
- 第32讲 UI组件之 时间日期控件DatePicker和TimePicker
第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置, Time ...
- mvc4中jquery-ui日期控件datepicker的应用
mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...
- 日期控件 DatePicker 在ie8不能用
过个年,日期控件DatePicker在ie8下突然不能用了,程序也没升级,很是奇怪. 把ie8的“禁用脚本调试”去掉,再次运行,发现提示有脚本错误. 想着可能是兼容性问题,于是把兼容性视图打开运行,还 ...
- 日期控件datepicker的使用
引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js ...
- android 日期控件 DatePicker
DatePicker的缺陷 提供的API太少,没办法个性化定制.比如,不能指定某部分的颜色,不能控制显示的部分等. xml中提供的属性太少,同样影响定制化. 兼容性问题太多,在4.x,5.x和6.0+ ...
- bootstrap 模态框日期控件datepicker被遮住问题的解决
找到日期输入框,并将 .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:
- 使用日期控件datePicker,阻止移动端的自动调取键盘的事件
方法:简单来说就是阻止input的默认事件. 因为datePicker就是用input来封装的,所以直接阻止input的输入事件就ok: 很简单,把input field属性readonly设置为tr ...
随机推荐
- chord原理的解读
chord: A Scalable Peer-to-peer Lookup Service for Internet Application 在 P2P 系统中,有效地定位分布在网络中不同节点的数据资 ...
- Keil中LIB库的作用、生成与调用
LIB库有什么用,一个简单的例子就是Silicon Labs为C8051F单片机USB提供的USBXpress LIB库了,如USB发送数据.接收数据等,都是通用性很强的函数,但因为保密的原因,这个函 ...
- bzoj4034
http://www.lydsy.com/JudgeOnline/problem.php?id=4034 树链剖分. 跟NOI2015的“软件包管理”一模一样..... 河南的爽死了...... #i ...
- DBA避坑宝典:Oracle运维中的那些事儿
对于Oracle运维中的那些事儿,我的最终目的:不是比谁更惨,而是能够从中吸取经验和教训. 从我的理解来看,我会从下面的几个方面来进行说明DBA运维中的一些事儿. 每个部分都是非常关键的,缺一不可,而 ...
- 深入理解linux网络技术内幕读书笔记(二)--关键数据结构
Table of Contents 1 套接字缓冲区: sk_buff结构 1.1 网络选项及内核结构 1.2 结构说明及操作函数 2 net_device结构 2.1 MTU 2.2 结构说明及操作 ...
- DL,DT,DD,比传统table更语义,解析更快的table列表方式
使用dl,dt,dd替代传统的table布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- HDU 4444 Walk (离散化建图+BFS+记忆化搜索) 绝对经典
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4444 题意:给你一些n个矩形,给你一个起点,一个终点,要你求从起点到终点最少需要转多少个弯 题解:因为 ...
- maven编写主代码与测试代码
3.2 编写主代码 项目主代码和测试代码不同,项目的主代码会被打包到最终的构件中(比如jar),而测试代码只在运行测试时用到,不会被打包.默认情况下,Maven假设项目主代码位于src/main/ja ...
- Window7下vagrant的部署
1. 下载并安装VirtualBox 下载地址:https://www.virtualbox.org/wiki/Downloads,下载最新的安装包,接下来的安装步骤就是下一步下一步了,你懂的 ...
- Android应用开发提高系列(4)——Android动态加载(上)——加载未安装APK中的类
前言 近期做换肤功能,由于换肤程度较高,受限于平台本身,实现起来较复杂,暂时搁置了该功能,但也积累了一些经验,将分两篇文章来写这部分的内容,欢迎交流! 关键字:Android动态加载 声明 欢迎转载, ...