angularjs日期选择插件

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

 74259  366  查看评论 (52)
分享到微信朋友圈
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"

相关插件-日期和时间

Canvas时钟插件clock-canvas.js

使用html5中Canvas技术,绘制钟表表盘,表面大小支持自适应。
  日期和时间
 31031  334

漂亮的日历插件

带农历的js日历插件
  日期和时间
 68457  390

基于bootstrap按年、季度、年月、年月日的日历插件(原创)

基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrapdatetimepicker的扩展
  日期和时间
 26661  185

js css3扁平化APP图标时钟动画

js css3扁平化APP图标时钟动画
  日期和时间
 25320  327

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

    小钻风 0
    2022/6/19 9:21:06
    请问怎么获取选择后的时间啊
        ???0
        2022/10/26 11:02:05
        后来有解决吗,怎么获取选择后的值呀
    回复
    qc511 0
    2022/5/7 17:38:34
    怎么监听啊?想禁止选择未来时间
        幼稚园小班大佬0
        2023/11/22 15:49:50
        请问解决了吗?想禁用当前时间之前的日期
        幼稚园小班大佬0
        2024/7/3 19:25:55
        请问解决了吗
    回复
    带着猫咪去钓鱼 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
        2024/7/3 19:26:56
        请问禁用的问题解决了吗
    回复
    ╃╃??★? 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的代码嘛,试了好几个小时,还是没有实现!!! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复