angular 日期时间选择控件

使用情况:在不引入jquery的情况下使用日期时间[控件],
修改了laydate的部分信息,使其配合angular directive
1 使用引入只需要bower install jlaydate@1.0.0

2 在html加入 

1
<script src="../bower_components/jlaydate/laydate.min.js"></script>

3 自定义自己的directive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
angular.module('yourApp').directive('timePicker', function($parse) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      var configuration = {
        elem: '#' + attrs.id,
        element: element[0],
        format: 'YYYY-MM-DD hh:mm:ss',
        max: '2999-06-16 23:59:59', //最大日期
        istime: true,
        choose: function(datas) {
          ngModelController.$setValidity('timePickerFormat', true);
          $parse(attrs.ngModel).assign(scope, datas);
          scope.$apply();
        }
      };
      element.bind('focus', function() {
        laydate(configuration);
      });
      ngModelController.$parsers.push(function(data) {
        if (moment(data, 'YYYY-MM-DD HH:mm:ss', true).isValid()) {
          ngModelController.$setValidity('timePickerFormat', true);
          return data; //converted
        } else if (data) {
          ngModelController.$setValidity('timePickerFormat', false);
          return null;
        } else {
          ngModelController.$setValidity('timePickerFormat', true);
          return null;
        }
      });
    }
  };
});

4 运行效果

[控件]:https://github.com/janceChun/laydate.git