【怎么在使用angular 时间插件， _angular内置指令和方法】

怎么在使用angular 时间插件，

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

angular内置指令和方法

详细描述

截图

代码

angular.module("directives",[]).directive("datetimepicker",function(){
  return {
    restrict: "EA",  //指令作用范围是element或attribute
    require : "ngModel", //控制器是指令标签对应的ngModel
    link: function (scope, element, attrs, ctrl) {
 
      var unregister = scope.$watch(function(){        //关键点，下面详述
 
        $(element).append("<input id='date-"+attrs.dateid+"' style='border:none;width:100%' value='"+ctrl.$modelValue+"'>");
 //template用不好，于是用这个笨办法加上input标签
 
        element.on('change', function() { //注册onChange事件，设置viewValue
          scope.$apply(function() {
            ctrl.$setViewValue($("#date-"+attrs.dateid).val());
          });
        });
 
        element.on('click',function(){  //click触发日期框
          $("#date-"+attrs.dateid).datetimepicker({ 
            format : attrs.format || 'Y/m/d h:i',  //格式
            onClose : function(){          //关闭日期框时手动触发change事件
              element.change();
            }
          });
        });
 
        element.click();    //第一次绑定事件，模拟一次click，否则肯能要点两下才会出日期框
 
        return ctrl.$modelValue;
      }, initialize);
 
      function initialize(value){ //下面再说
        ctrl.$setViewValue(value);
        unregister();
      }
    }
  }
});

编辑于2024-11-15

时间排序

热门排序

[散修弟子]Android-811
0

你可以使用ui-Bootstrap插件——Datepicker Popup日期控件。参考https://www.cnblogs.com/pilixiami/p/5611346.html

查看全部>

编辑于2018-12-21

去第页