angularjs的引导日期选择器指令

Posted 2023-05-08

【中文标题】angularjs的引导日期选择器指令

【英文标题】：Bootstrap datepicker directive for angularjs

【发布时间】：2013-10-29 03:32:03

【问题描述】：

我写了一个简单的 datepicker 指令。这是代码：

appDirective.directive('datePicker', function() 
    return 
        restrict: 'E',
        require: ['ngModel'],
        scope: 
            ngModel: '='
        ,
        replace: true,
        template:
            '<div class="input-group">'     +
                    '<input type="text"  class="form-control" ngModel required>' +
                    '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
            '</div>' ,
        link: function(scope, element, attrs) 
            var input = element.find('input');
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);
            console.log(now);
            console.log(nowTemp);

            input.datepicker(
               format: "yyyy-mm-dd",
                onRender: function(date) 
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                
            );

            element.bind('blur keyup change', function() 
                scope.ngModel = input.val();
                console.info('date-picker event', input.val(), scope.ngModel);
            );
        
    
);

如果我在html 中使用<date-picker></date-picker>，这会触发日期选择器。

但是在上述指令中，onRender 的回调不起作用。我使用与Disable bootstrap dates相同的示例

我在这里做错了什么？

谢谢:)

【参考方案1】：

onRender 函数不是回调，它是一个被触发的事件。他们在您引用的文档中使用的示例是：

$('#dp5').datepicker()
  .on('changeDate', function(ev)
    if (ev.date.valueOf() < startDate.valueOf())
       ....
    
);

所以你应该添加一个事件监听器，而不是提供一个回调函数。做这样的事情：

input.datepicker()
  .on('onRender', function(ev, date)
      return date.valueOf() < now.valueOf() ? 'disabled' : '';
);

文档对于作为'onRender' 事件的一部分传递的确切内容有点模糊，但我很确定这应该有效。如果您没有收到日期对象，您可能需要在格式化之前从输入中读取它。

【参考方案2】：

AngularStrap 中有一个适用于 Bootstrap3 的原生实现，它利用了来自 AngularJS v1.2+ 的ngAnimate

演示：http://mgcrea.github.io/angular-strap/##datepicker

您可能还想结帐：

来源：https://github.com/mgcrea/angular-strap/blob/master/src/datepicker/datepicker.js

如果您更喜欢继续依赖 TwitterBootstrap javascript，那么旧版本就是这样做的：

旧文档：http://mgcrea.github.io/angular-strap/1.0/#/datepicker