angularjs日期选择插件

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

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"

相关插件-日期和时间

mobiscroll可上下滑动的日期时间插件

上下滑动日期时间插件,也可用做上下滑动选择菜单,移动端可用。
  日期和时间
 13551  68

圆形时间进度条-倒计时

html5 + css3 打造的圆形时间倒计时进度条
  日期和时间
 23631  53

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

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

jquery 圆形进度式倒计时

jquery 圆形进度式倒计时
  日期和时间
 17606  46

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

    QQ 0
    2018/11/19 10:31:27
    var dt = new Date();
    return dt.format("yyyy-MM-dd hh:mm:ss"); 回复
    0:0:0 0
    2018/11/16 15:05:17
    请问json数据里面的时间是"start":1542556800000,怎么转换为YYYY-MM-DD
        fbm20161
        2018/11/17 8:46:08
        var d = new Date('1542556800000');
        var year = d.getFullYear();//得到 年
        var month = d.getMonth() + 1; // 得到 月份
        var date = d.getDate(); // 得到 日  
        var dateStr = year + '-' + month + '-' + date;
    回复
    小爷依旧厉害 0
    2018/11/2 8:49:07
    如何拿到里面的日期和时间???急急急
        (づ ̄ 3 ̄)づ0
        2018/11/7 10:29:28
        js中input添加id属性js中 var time = $("#id").val()可获得时间
        (づ ̄ 3 ̄)づ1
        2018/11/7 10:31:33
        wui-date input添加id
        index中 var time = $("#id").val() 可以获取到时间
        fbm20161
        2018/11/17 8:47:58
        插件ng-model属性的变量绑定到angularjs $scope中
        octobertiger0
        2018/11/19 21:23:09
        var time = $("#id").val()
        ok!
    回复
    西湖区的小学生 0
    2018/10/30 11:54:00
    angular.min.js这个js有问题!!!!!下载不存在angular.js
        多闻技术0
        2018/11/7 10:00:09
        js在包里你可以吧src改成本地的
    回复
    xydzs 0
    2018/10/24 20:58:39
    wui-date.min.js文件有问题,wui-date.js可以使用
        fbm20160
        2018/11/17 8:49:32
        感谢纠错,可能是压缩过程出了问题。
    回复
    迟shine 0
    2018/10/22 11:00:17
    我想问一下我,添加了这个时间插件,输入框的样式出来了,但是在鼠标点击输入框的时候,时间选择器弹不出来,是为什么?
        迟shine0
        2018/10/22 11:01:45
        我在项目里直接使用示例代码的那个index页面可以弹出时间选择弹窗.
        fbm20161
        2018/11/17 8:51:56

        是否在项目引入依赖

        var app = angular.module('app',["wui.date"]);
    回复
    【 】 0
    2018/10/17 15:31:38
    请问如何获取插件里的值啊
        无心0
        2018/10/19 17:35:07
        同问
        fbm20161
        2018/11/17 8:55:28
        <wui-date 
            format="yyyy-mm-dd hh:mm:ss" 
            placeholder="请选择或输入日期" 
            id="date4" 
            btns="{'ok':'确定','now':'此刻'}" 
            ng-model="app.date"
        >
        </wui-date>

        通过ng-model属性绑定到$scope  最好绑定到对象
        js代码

        $scope.app = {'date':'2018-11-17'}; // 初始化插件时间
    回复
取消回复
  短信接口