个人中心
gpt4 book ai didi

javascript - 一次显示一个指令 AngularJS

转载 作者：行者123 更新时间：2023-12-03 06:59:41 28 4
gpt4 key购买 nike

我试图在一个页面中使用多个指令，以便一次只能启用一个日期选择器，我尝试添加动态类，但不知何故我需要双击输入框来隐藏另一个。让我知道我在这里做错了什么。

工作 Plnkr - http://plnkr.co/edit/ZcJr9zg9PeUeRX4kRhbW?p=preview

HTML 代码 -

<body ng-controller="mainCtrl"> 
    <div class="" ng-repeat="row in fakeDataSet" style="height: 150px; float: left;">
        <my-datepicker 
            dateid="dateid"
            first-week-day-sunday="true" 
            placeholder="Choose date"
            view-format="Do MMMM YYYY"
            checkval="$index">
        </my-datepicker>
    </div>
</body>

JS 代码 -

var myApp = angular.module('myApp', []);

myApp.controller('mainCtrl', function($scope){

    $scope.fakeDataSet = [34,787,56,78];
})

myApp.directive('myDatepicker', ['$document', function($document) {

    'use strict';

    var setScopeValues = function (scope, attrs) {
        scope.format = attrs.format || 'YYYY-MM-DD';
        scope.viewFormat = attrs.viewFormat || 'Do MMMM YYYY';
        scope.locale = attrs.locale || 'en';
        scope.firstWeekDaySunday = scope.$eval(attrs.firstWeekDaySunday) || false; 
        scope.placeholder = attrs.placeholder || '';
    };

    return {
        restrict: 'EA',
        scope: {
            checkval: "="
        },
        link: function (scope, element, attrs, ngModel) {           
            scope.dynamicMyDatePicker = 'my-datepicker' + "_" + scope.checkval, 
            scope.dynamicMyDatePickerInput = 'my-datepicker-input' + "_" + scope.checkval;

            setScopeValues(scope, attrs);

            scope.calendarOpened = false;
            scope.days = [];
            scope.dayNames = [];
            scope.viewValue = null;
            scope.dateValue = null;

            moment.locale(scope.locale);
            var date = moment();

            var generateCalendar = function (date) {
                var lastDayOfMonth = date.endOf('month').date(),
                    month = date.month(),
                    year = date.year(),
                    n = 1;

                var firstWeekDay = scope.firstWeekDaySunday === true ? date.set('date', 2).day() : date.set('date', 1).day();
                if (firstWeekDay !== 1) {
                    n -= firstWeekDay - 1;
                }

                //Code to fix date issue
                if(n==2)
                    n = -5;

                scope.dateValue = date.format('MMMM YYYY');
                scope.days = [];

                for (var i = n; i <= lastDayOfMonth; i += 1) {
                    if (i > 0) {
                        scope.days.push({day: i, month: month + 1, year: year, enabled: true});
                    } else {
                        scope.days.push({day: null, month: null, year: null, enabled: false});
                    }
                }
            };

            var generateDayNames = function () {
                var date = scope.firstWeekDaySunday === true ?  moment('2015-06-07') : moment('2015-06-01');
                for (var i = 0; i < 7; i += 1) {
                    scope.dayNames.push(date.format('ddd'));
                    date.add('1', 'd');
                }
            };

            generateDayNames();

            scope.showCalendar = function () {
                scope.calendarOpened = true;
                generateCalendar(date);
            };

            scope.closeCalendar = function () {
                scope.calendarOpened = false;
            };

            scope.prevYear = function () {
                date.subtract(1, 'Y');
                generateCalendar(date);
            };

            scope.prevMonth = function () {
                date.subtract(1, 'M');
                generateCalendar(date);
            };

            scope.nextMonth = function () {
                date.add(1, 'M');
                generateCalendar(date);
            };

            scope.nextYear = function () {
                date.add(1, 'Y');
                generateCalendar(date);
            };

            scope.selectDate = function (event, date) {
                event.preventDefault();
                var selectedDate = moment(date.day + '.' + date.month + '.' + date.year, 'DD.MM.YYYY');
                ngModel.$setViewValue(selectedDate.format(scope.format));
                scope.viewValue = selectedDate.format(scope.viewFormat);
                scope.closeCalendar();
            };

            // if clicked outside of calendar
            //var classList = ['my-datepicker', 'my-datepicker-input'];
            var classList = [];
            classList.push(scope.dynamicMyDatePicker);
            classList.push(scope.dynamicMyDatePickerInput);
            if (attrs.id !== undefined) classList.push(attrs.id);
            $document.on('click', function (e) {
                if (!scope.calendarOpened) return;

                var i = 0,
                    element;

                if (!e.target) return;

                for (element = e.target; element; element = element.parentNode) {
                    var id = element.id;
                    var classNames = element.className;

                    if (id !== undefined) {
                        for (i = 0; i < classList.length; i += 1) {
                            if (id.indexOf(classList[i]) > -1 || classNames.indexOf(classList[i]) > -1) {
                                return;
                            }
                        }
                    }
                }

                scope.closeCalendar();
                scope.$apply();
            });

        },
        template: 
        '<div><input type="text" ng-focus="showCalendar()" ng-value="viewValue" class="my-datepicker-input" ng-class="dynamicMyDatePickerInput" placeholder="{{ placeholder }}"></div>' +
        '<div class="my-datepicker" ng-class="dynamicMyDatePicker" ng-show="calendarOpened">' +
        '  <div class="controls">' +
        '    <div class="left">' +
        '      <i class="fa fa-backward prev-year-btn" ng-click="prevYear()"></i>' +
        '      <i class="fa fa-angle-left prev-month-btn" ng-click="prevMonth()"></i>' +
        '    </div>' +
        '    <span class="date" ng-bind="dateValue"></span>' +
        '    <div class="right">' + 
        '      <i class="fa fa-angle-right next-month-btn" ng-click="nextMonth()"></i>' +
        '      <i class="fa fa-forward next-year-btn" ng-click="nextYear()"></i>' +
        '    </div>' +
        '  </div>' +
        '  <div class="day-names">' +
        '    <span ng-repeat="dn in dayNames">' +
        '      <span>{{ dn }}</span>' +
        '    </span>' +
        '  </div>' +
        '  <div class="calendar">' +
        '    <span ng-repeat="d in days">' +
        '      <span class="day" ng-click="selectDate($event, d)" ng-class="{disabled: !d.enabled}">{{ d.day }}</span>' +
        '    </span>' +
        '  </div>' +
        '</div>'
    };

}]);

最佳答案

您可以使用 mousedown 事件关闭日历:

$document.on('mousedown', function (e) {
    scope.closeCalendar();
    scope.$apply();
});

此外，您还必须停止在日历本身上触发的 mousedown 事件的传播，这样当您选择日期时它就不会自行关闭:

<div class="my-datepicker" ng-show="calendarOpened" ng-mousedown="$event.stopPropagation()">

为了能够将所选日期放入input中，请在selectDate()方法中添加以下代码:

scope.val = selectedDate.format(scope.format);

并将 val 变量绑定(bind)到 input 元素:

<input type="text" ng-focus="showCalendar()" ng-model="val" .../>

这里是Plunker .

关于javascript - 一次显示一个指令 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37111921/

28 4 0
文章推荐： javascript - React - Render 中的 HOCs - 规则有异常(exception)吗？
文章推荐： kubernetes - 有没有办法使用 prometheus 监控 kube cron 作业
文章推荐： javascript - 正在将我的类组件重构为 Functional 组件，并且在 useEffect 方面遇到了一个非常困难的问题
文章推荐： angularjs - 预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Origin
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com