angularjs日期选择插件

所属分类:输入-日期和时间

 61552  323  查看评论 (46)
分享到微信朋友圈
X
angularjs日期选择插件 ie兼容12

使用方法

1. 在你的项目引入wui.css或wui.min.css,以及font图标文件(与wui.css文件同级)

<link rel="stylesheet" type="text/css" href="css/wui.min.css">

2. 在你的项目引入wui-date.js或wui-date.min.js,依赖angular.js

<script type="text/javascript" src="js/angular.js" charset="utf-8"></script>
<script type="text/javascript" src="js/wui-date.js" charset="utf-8"></script>

3. 在你的项目引入wuiDate依赖

var app = angular.module('app',["wui.date"]);

4. 在页面使用wui-date组件

<wui-date 
	format="yyyy-mm-dd hh:mm:ss" 
	placeholder="请选择或输入日期" 
	id="date4" 
	btns="{'ok':'确定','now':'此刻'}" 
	ng-model="date4"
>
</wui-date>

属性

  • id:时间插件主键 , 默认:scope.$id, 示例:id="date"

  • name:input的name属性, 默认:空, 示例:name="date"

  • format:定义时间格式, 默认:yyyy-mm-dd, 示例:format="yyyy-mm-dd hh:mm:ss"

  • ng-model:$scope绑定的初始化以及选择后时间的属性, 默认:不能为空, 示例:ng-model="date"

  • btns:定义底部按钮信息, 默认:空则隐藏所有按钮, 示例:btns="{'ok':'确定','now':'此刻','hitherto':true}"

         (ok表示确定按钮 now表示选择当前系统时间按钮 hitherto:true表示显示选择'至今'按钮)

  • interval:定义time选择器时间间隔, 默认:30minutes, 示例:interval="20"

  • position:选择框浮动位置, 默认:left, 示例:position="right"

  • placeholder:选择框提示语 , 默认:选择时间, 示例:placeholder="请选择或输入日期"

  • width:输入框宽度 支持px及百分比 , 默认:220px, 示例:width="220"或width="220px"或width="50%"

  • size:选择插件内置大小 , 默认:小型, 示例:size="large"或size="L"

相关插件-日期和时间

timeago.js自动将时间戳转换为更易读的时间轴

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴
  日期和时间
 23275  304

仿美团酒店的日期插件,修改过的

插件仿美团的日期选择插件,有需要的可以下载看看
  日期和时间
 43895  372

时间插件lhgcalendar

lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.
  日期和时间
 45581  321

canvas时钟

canvas绘制时钟,代码结构清晰易懂
  日期和时间
 25295  358

讨论这个项目(46)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    带着猫咪去钓鱼 0
    2020/7/24 14:35:01
    <wui-date dateClass="col-input" format="yyyy-mm-dd" placeholder="请选择或输入日期" id="brithday" btns="{'ok':'确定','now':'此刻'}" ng-model="formData.brithday" ng-readonly="operation=='operDetail' " ng-class="{disabledTrue:operation == 'operDetail'}" ></wui-date>
    1、初始化的时间是年月日,但是保存后,查看就变成了年月日 时分秒了;
    2、禁用方式不启用,有无好的解决方案呢; 回复
    ╃╃??★? 0
    2020/4/24 10:32:45
    jy03055420 0
    2020/4/11 12:16:10
    你好,插件出现 小问题,点击input框,出现日历框,但是,点击左边空白处(也就是点击document时候) 日历框不会收缩(隐藏)
    只有点击 右边 区域时候,才会隐藏 回复
    心事说给你听 0
    2019/8/19 17:16:55
    大神怎么动态改变format,求回复 回复
    安之若素 0
    2019/8/13 19:10:23
    大神如何修改才能够用ie浏览器打开
        心事说给你听0
        2019/8/20 10:50:49
        请问按照楼主这样写的话,怎么回调呀
    回复
    小贝 0
    2019/7/1 14:36:25
    有么有时间段的设置? 回复
    亦欢 0
    2019/5/31 14:10:17
    求问初始化失败,日期框显示不出来是什么原因呢 回复
    4nnny 0
    2019/4/18 0:28:48
    有大神有demo的代码嘛,试了好几个小时,还是没有实现!!! 回复
    _那夜星辰° 0
    2019/3/19 10:45:27
    没内容啊,按照上面做的 回复
    飞机飞远了 0
    2019/1/10 15:30:04
    jsp中interval、placeholder中这些属性都没有用,怎么解决啊 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复