AngularJS之jeDate日期控件基本使用

2019-01-10 07:47:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

业务背景:

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

基本封装使用:

xxx.directive('jeDatepicker', function ($compile, $timeout) {
  return{
    restrict: 'A',
    require: 'ngModel',//依赖的指令
    scope: {
      'ngModel': '=' //=双向数据绑定,@单向数据绑定, &调用父作用域的函数
    },
    link: function ($scope, $element, $attr) {
      /**
       * exp:
       *  <input type="text" id="test" class="form-control" ng-model="test" je-datepicker>
       */
      var id = $attr.id;
      var options = {
        id: '#' + id
      };
      options.minDate = $attr.mindate ? $attr.mindate : '1900-01-01 00:00:00';
      options.maxDate = $attr.maxdate ? $attr.maxdate : '2099-12-31 23:59:59';
      options.format = $attr.format ? $attr.format : 'YYYY-MM-DD hh:mm:ss';
      options.shortcut = [
        {name:"一周",val:{DD:7}},
        {name:"一个月",val:{DD:30}},
        {name:"二个月",val:{MM:2}},
        {name:"三个月",val:{MM:3}},
        {name:"一年",val:{DD:365}}
      ];
      options.donefun = function (obj) {//选中日期的回调
        $scope.$apply(function () {
          $scope.ngModel = obj.val;
        })
      };
      options.clearfun = function() {//清除日期后的回调
        $scope.$apply(function () {
          $scope.ngModel = '';
        })
      };
      $timeout(function () {
        jeDate(options.id, options);
      }, 1);
    }
  }
})

  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:git 服务器搭建及提交代码检查

下一篇:解决ui-router路由监听$stateChangeStart、$stateChangeSuccess