【angular+bootstrap】angular初级的时间选择器
近期的一个项目,是用angular来写的,本来框架就是第一次接触,使用相关插件的时候就感觉更加没有头绪了,其中一个插件就是时间选择器。比较好用时间选择器就是bootstrap里面的datetimepicker和daterangepicker(详情见bootstrap里面的时间选择器笔记)。
<div class="col-md-3 timePicker myPay-picker pull-right">
<input type="text" name="reservation" id="timePicker0" class="form-control" />
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
$('#timePicker0')
.val(moment().subtract('day', 4).format('YYYY/MM/DD') + ' - ' + moment().format('YYYY/MM/DD'))
.daterangepicker({
opens : 'left', //日期选择框的弹出位置
format : 'YYYY/MM/DD', //控件中from和to 显示的日期格式
ranges : {
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()]
}
},function(start, end, label) {
if (start.format('YYYY/MM/DD')
== new Date().format('yyyy/MM/dd')) {
MyLePay.getTodayOrderDetail().then(function (data) {
var datas = data.data;
var item = [];
var data = [];
var day = datas.trueSales;
item.push(moment().format("MM/DD"));
data.push(day
/ 100);
$scope.item = [];
$scope.data = [];
$scope.item = item;
$scope.data = data;
});
return;
}
var data = "startDate="
+ start.format('YYYY/MM/DD')
+ "&endDate="
+ end.format('YYYY/MM/DD');
MyLePay.getDayTrade(data).then(function(result){
var financials = result.data;
var item = [];
var data = [];
angular.forEach(financials,
function (financial, index,
array) {
var date = moment(financial.balanceDate);
item.push(date.format("MM/DD"));
data.push(financial.transferPrice
/ 100);
});
if(end.format('YYYY/MM/DD')==new Date().format('yyyy/MM/dd')){
item.push(moment().format("MM/DD"));
data.push($scope.day.trueSales);
}
$scope.item = item;
$scope.data = data;
});
});
【angular+bootstrap】angular初级的时间选择器的更多相关文章
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- 使用angular.bootstrap() 完成模块的手动加载
之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...
- ClockPicker – 时钟风格 Bootstrap 时间选择器
ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- bootstrap 时间选择器 datetime
$("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...
- springMVC+angular+bootstrap+mysql的简易购物网站搭建
springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(a ...
- 【bootstrap】时间选择器datetimepicker和daterangepicker
在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel= ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- angular.extend、angular.$watch、angular.bootstrap
1.angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象. 直接上代 ...
随机推荐
- ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇
由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——实践篇 在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议 ...
- 也来“玩”Metro UI之磁贴
也来“玩”Metro UI之磁贴 Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩, ...
- windows服务1053错误排查
公司员工离职,接手他的任务,告诉我windows服务已经完成,没来得及测试.好吧,我接着做...... 服务生成后,运行bat文件.启动服务失败,提示错误编码1053.根据以往的经验,一般是三方面引起 ...
- jQuery Validation让验证变得如此容易(二)
上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required. 现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码 ...
- IceMx.Mvc 我的js MVC 框架七、完善植物大战僵尸(增加阳光的消费和获得)
话不多说,先上图 这次增加了阳光的消费和获得,增加了阳光的点击动画 重新排布了布局 有兴趣的话就研究下吧. 上一篇有朋友说让我把项目放到github上面维护,本人没用过这个,肯请朋友们帮小弟科普一下放 ...
- C#常用的数据格式转换
用DataFormatString格式化GridView 在 GridView里面显示数据,要显示的数据有好多位小数,就想让它只显示两位小数,在delphi里,直接用DisplayFormat就行了, ...
- Android与js交互实例
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...
- Linux进程同步之POSIX信号量
POSIX信号量是属于POSIX标准系统接口定义的实时扩展部分.在SUS(Single UNIX Specification)单一规范中,定义的XSI IPC中也同样定义了人们通常称为System V ...
- 一个简单的string类,读书看报系列(一)
对于这个类,写过程序的都知道应该含有的方法是 初始化.销毁.拼接.求长度.清除.判断是否为空等.还有一些操作符重载 一.先看初始化: 可以想到应该有默认构造的的.带有字符串的.带有默认字符的.还有一个 ...
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...