• AngularJS之jeDate日期控件基本使用


    业务背景:

      初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键、时分秒等。鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDate,总体效果还可以

    基本封装使用:

     1 xxx.directive('jeDatepicker', function ($compile, $timeout) {
     2   return{
     3     restrict: 'A',
     4     require: 'ngModel',//依赖的指令
     5     scope: {
     6       'ngModel': '=' //=双向数据绑定,@单向数据绑定, &调用父作用域的函数
     7     },
     8     link: function ($scope, $element, $attr) {
     9       /**
    10        * exp:
    11        *  <input type="text" id="test" class="form-control" ng-model="test" je-datepicker>
    12        */
    13       var id = $attr.id;
    14       var options = {
    15         id: '#' + id
    16       };
    17       options.minDate = $attr.mindate ? $attr.mindate : '1900-01-01 00:00:00';
    18       options.maxDate = $attr.maxdate ? $attr.maxdate : '2099-12-31 23:59:59';
    19       options.format = $attr.format ? $attr.format : 'YYYY-MM-DD hh:mm:ss';
    20       options.shortcut = [
    21         {name:"一周",val:{DD:7}},
    22         {name:"一个月",val:{DD:30}},
    23         {name:"二个月",val:{MM:2}},
    24         {name:"三个月",val:{MM:3}},
    25         {name:"一年",val:{DD:365}}
    26       ];
    27       options.donefun = function (obj) {//选中日期的回调
    28         $scope.$apply(function () {
    29           $scope.ngModel = obj.val;
    30         })
    31       };
    32       options.clearfun = function() {//清除日期后的回调
    33         $scope.$apply(function () {
    34           $scope.ngModel = '';
    35         })
    36       };
    37       $timeout(function () {
    38         jeDate(options.id, options);
    39       }, 1);
    40     }
    41   }
    42 })
  • 相关阅读:
    JSP中文乱码
    Java Enum 浅析
    详解 Tomcat: The value for the useBean class attribute is invalid
    PHP+ACCESS 实例
    MySQL limit实际用法的详细解析
    JSP获取当前时间
    sql where 1=1和 0=1 的作用
    利用Quartus设计4位同步二进制加法计数器
    JSP各种路径的获取
    JSP连接MYSQL数据库
  • 原文地址:https://www.cnblogs.com/gerry2019/p/10241379.html
Copyright © 2020-2023  润新知