Question

我是angularjs的新人

如何让pickadate.js在angularjs中工作

我可以让pickadate.js工作，但是如何让pickadate.js与angularjs一起使用以在§scope中使用它

Answer 1

如果您没有被迫使用pickadate.js：如何使用ui-bootstrap（修改后的Twitter Bootstrap库与AngularJS兼容）并使用其中包含的日期选择器？

问题是，需要修改任何JavaScript框架（在您的情况下为pickadate.js）以与AngularJS兼容。对于Twitter Bootstrap来说，这与AngularJS的开箱即用 - 因此，在这种情况下，Angular团队本身重写了Bootstrap以兼容。

Answer 2

我刚写完pickadate.js as an AngularJS directive。看看它，你也可以下载示例代码！干杯！

如果你想要指令本身，这里是它的代码：

// pick-a-date (attribute)
angular.module('ng').directive('pickADate', function () {
    return {
        restrict: "A", 
        scope: {
            pickADate: '=',
            minDate: '=',
            maxDate: '='
        },
        link: function (scope, element, attrs) {
            element.pickadate({
                onSet: function (e) {
                    if (scope.$$phase || scope.$root.$$phase) // we are coming from $watch or link setup
                        return;
                    var select = element.pickadate('picker').get('select'); // selected date
                    scope.$apply(function () {
                        if (e.hasOwnProperty('clear') || !select) {
                            scope.pickADate = null;
                            return;
                        }
                        if (!scope.pickADate)
                            scope.pickADate = new Date(0);
                        scope.pickADate.setYear(select.obj.getYear() + 1900); // hello Y2K...
                        // It took me half a day to figure out that javascript Date object's getYear
                        // function returns the years since 1900. Ironically setYear() accepts the actual year A.D.
                        // So as I got the $#%^ 114 and set it, guess what, I was transported to ancient Rome 114 A.D.
                        // That's it I'm done being a programmer, I'd rather go serve Emperor Trajan as a sex slave.
                        scope.pickADate.setMonth(select.obj.getMonth());
                        scope.pickADate.setDate(select.obj.getDate());
                    });
                },
                onClose: function () {
                    element.blur();
                }
            });
            function updateValue(newValue) {
                if (newValue) {
                    scope.pickADate = (newValue instanceof Date) ? newValue : new Date(newValue);
                    // needs to be in milliseconds
                    element.pickadate('picker').set('select', scope.pickADate.getTime());
                } else {
                    element.pickadate('picker').clear();
                    scope.pickADate = null;
                }
            }
            updateValue(scope.pickADate);
            element.pickadate('picker').set('min', scope.minDate ? scope.minDate : false);
            element.pickadate('picker').set('max', scope.maxDate ? scope.maxDate : false);
            scope.$watch('pickADate', function (newValue, oldValue) {
                if (newValue == oldValue)
                    return;
                updateValue(newValue);
            }, true);
            scope.$watch('minDate', function (newValue, oldValue) {
                element.pickadate('picker').set('min', newValue ? newValue : false);
            }, true);
            scope.$watch('maxDate', function (newValue, oldValue) {
                element.pickadate('picker').set('max', newValue ? newValue : false);
            }, true);
        }
    };
});

Answer 3

https://github.com/alongubkin/angular-datepicker是分叉的，用于处理Angular。

添加<script src="angular-datepicker.js"> </script>

使用它像：

<input type="text" id="datepicker" pick-a-date="date" pick-a-date-options="dpoptions" placeholder="Select date" />

在您的控制器中

   var myapp = angular.module('myapp', ['angular-datepicker']);

...

    $scope.dpoptions = {
        format: 'ddd, dd-mm-yyyy' // ..etc
    }

angularjs与pickadate.js如何？

3 个答案: