javascript - Show directive one at a time AngularJS -
i trying use multiple directive in 1 page such 1 datepicker should enable @ 1 time, tried adding dynamic class somehow need double click in input box hide another. let me know doing wrong here.
working plnkr - http://plnkr.co/edit/zcjr9zg9peuerx4krhbw?p=preview
html code -
<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 code -
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 fix date issue if(n==2) n = -5; scope.datevalue = date.format('mmmm yyyy'); scope.days = []; (var = n; <= lastdayofmonth; += 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'); (var = 0; < 7; += 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 = 0, element; if (!e.target) return; (element = e.target; element; element = element.parentnode) { var id = element.id; var classnames = element.classname; if (id !== undefined) { (i = 0; < classlist.length; += 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>' }; }]);
you can use mousedown event close calendar:
$document.on('mousedown', function (e) { scope.closecalendar(); scope.$apply(); }); additionally have stop propagation of mousedown event triggered on calendar doesn't close when select date:
<div class="my-datepicker" ng-show="calendaropened" ng-mousedown="$event.stoppropagation()"> to able put selected date input, have following code in selectdate() method:
scope.val = selecteddate.format(scope.format); and bind val variable input element:
<input type="text" ng-focus="showcalendar()" ng-model="val" .../> here plunker.
Comments
Post a Comment