JS实现时间选择插件

引导语

在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件。对于未接触的新事物,自己总是感觉不明觉厉。其实,有些实现可以使用很简单的方法即可。以此为例,偶然的一次翻看课本发现HTML5中已经设计到此种实现。其中,设置input元素的type属性为datetime-local即可实现。

问题

实际编码过程中,还是出现了问题。$scope.bill_dateBegin并不能获取到时间选择框中的设置值。

原因

AngularJS support the input type datetime-local since version 1.3.0-beta.1

原来AngularJS 1.3.0-beta.1 极其之上的版本才支持datetime-local的绑定,那就是自己的版本太低导致的了。经过查看版本,发现自己的版本为1.3.0.14,应该不低啊。但实验证明,还是自己的版本过低导致的。尝试使用高版本。

解决方法

尝试使用高版本。但使用1.5.0版本还是没效果!

经过一番询问,还是未能够解决问题。自己尝试着试试type的其它时间类型,当自己使用date类型,发现居然绑定上了,我就呵呵了....而其它的类型例如datetime、datetime-local却无法绑定,费解。我只能说angular还是不够强大!

不过问题还是来了。当自己使用如下语句时,确弹出了下图的信息,而我们则需要这样的格式:2015-12-24 12:00:00。明显日期格式需要进行转换。

bill_dateEnd = $scope.bill_dateEnd;

alert(bill_dateEnd);

有关日期时间的转换问题详见博文《JS抽离公共函数》。

感触

自己的知识面还是比较窄,还是需要多读书《疯狂HTML 5/CSS 3/JavaScript讲义》。

AngularJS进阶(二十二)实现时间选择插件的更多相关文章

  1. AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href

    书海拾贝之特殊的ng-src和ng-href 在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下: 1) 浏览器加载静态HTML文件并解析为DOM: 2) 浏览器加载angular. ...

  2. Java进阶(三十二) HttpClient使用详解

    Java进阶(三十二) HttpClient使用详解 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们 ...

  3. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  4. Bootstrap入门(二十八)JS插件5:工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  5. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  6. 网站开发进阶(四十二)巧用clear:both

    网站开发进阶(四十二)巧用clear:both 前言 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正 ...

  7. Java进阶(五十二)利用LOG4J生成服务日志

    Java进阶(五十二)利用LOG4J生成服务日志 前言 由于论文写作需求,需要进行流程挖掘.前提是需要有真实的事件日志数据.真实的事件日志数据可以用来发现.监控和提升业务流程. 为了获得真实的事件日志 ...

  8. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  9. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  10. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

随机推荐

  1. Redis和nosql简介,api调用;Redis数据功能(String类型的数据处理);List数据结构(及Java调用处理);Hash数据结构;Set数据结构功能;sortedSet(有序集合)数

    1.Redis和nosql简介,api调用 14.1/ nosql介绍 NoSQL:一类新出现的数据库(not only sql),它的特点: 1.  不支持SQL语法 2.  存储结构跟传统关系型数 ...

  2. HDFS基本原理及数据存取实战

    ---------------------------------------------------------------------------------------------------- ...

  3. Android适配难题全面总结

    支持多种屏幕 Android 可在各种具有不同屏幕尺寸和密度的设备上运行.对于 应用,Android 系统在不同设备中提供一致的开发环境, 可以处理大多数工作,将每个应用的用户界面调整为适应其显示的 ...

  4. Leetcode解题-树(5.0.0)基础类

    与第二章类似,LeetCode指定了TreeNode实现.为了方便后续习题的编写和测试,创建一个基础父类,包含TreeNode实现,以及create()和print()创建和打印树的方法.其中crea ...

  5. [csdn markdown]使用摘记一源代码高亮及图片上传和链接

    本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传 上边这是标题行,只需要使用一个#就可以表示,几个表示是几级标题 图片上传 本地图片上传控件 本地图片上传方式 ...

  6. FFmpeg源代码简单分析:libswscale的sws_getContext()

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  7. Simple tutorial for using TensorFlow to compute polynomial regression

    """Simple tutorial for using TensorFlow to compute polynomial regression. Parag K. Mi ...

  8. 利用并查集+贪心解决 Hdu1232

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  9. Google Guava的5个鲜为人知的特性

    译文出处: 花名有孚   原文出处:takipi.com Google Guava有哪些比较冷门但却又实用的特性呢? 它是最流行的开源库之一,你应该听过它的大名,它诞生的地方正是人们举办真正的魁地奇比 ...

  10. EBS DBA指南笔记(一)

    第一章  ORACLE APPLICATIONS 的组件与架构 1.ebs组件的几大构成:客户端,form server,web server,concurrent processor,数据库.每个组 ...