Skip to content

Adding the possibility to depend on another value to re-render the directive + Chinese test fix #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/js/datetimepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,8 @@
'</table></div>',
scope: {
onSetTime: '&',
beforeRender: '&'
beforeRender: '&',
dependOn: '=?'
},
replace: true,
link: function link(scope, element, attrs, ngModelController) {
Expand All @@ -158,6 +159,14 @@
return moment.utc(unixDate).year(startYear).startOf('year');
};

//only watch if dependOn exists
if(scope.dependOn){
scope.$watch('dependOn', function(){
//if dependent value change, re-render the directive.
ngModelController.$render();
});
}

var dataFactory = {
year: function year(unixDate) {
var selectedDate = moment.utc(unixDate).startOf('year');
Expand Down
38 changes: 38 additions & 0 deletions test/configuration/beforeRender.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,44 @@ describe('beforeRender', function () {
});

describe('called before a new view is rendered', function () {

it('in year view $dates after dependent date are not selectable', function () {

$rootScope.date = moment('2008-01-01T00:00:00.000').toDate();
$rootScope.otherDateModel = moment('2009-01-01T00:00:00.000').toDate();

$rootScope.beforeRender = function (dates) {
expect(dates.length).toBe(12);
dates.map(function (current) {
//make not selectable after the dependent date
current.selectable = moment(new Date(current.utcDateValue)).isBefore(moment($rootScope.otherDateModel));
});
};

spyOn($rootScope, 'beforeRender').and.callThrough();

var element = $compile('<datetimepicker data-ng-model=\'date\' data-before-render=\'beforeRender($dates)\' data-datetimepicker-config="{ startView: \'year\', minView: \'year\' }" data-depend-on="otherDateModel"></datetimepicker>')($rootScope);
$rootScope.$digest();

var selectedElement = jQuery(jQuery('.year', element)[2]);

expect(selectedElement.hasClass('disabled')).toBeFalsy();
selectedElement.trigger('click');
expect($rootScope.date).toEqual(moment('2001-01-01T00:00:00.000').toDate());

$rootScope.otherDateModel = moment('2005-01-01T00:00:00.000').toDate();
$rootScope.$apply();

var disabledElement = jQuery(jQuery('.year', element)[10]);

expect(disabledElement.hasClass('disabled')).toBeTruthy();
disabledElement.trigger('click');
expect($rootScope.date).toEqual(moment('2001-01-01T00:00:00.000').toDate());

expect($rootScope.beforeRender).toHaveBeenCalled();

});

it('in year view $dates parameter contains 12 members', function () {

$rootScope.date = moment('2008-01-01T00:00:00.000').toDate();
Expand Down
2 changes: 1 addition & 1 deletion test/view/zh_cn/hour.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe('hour view with initial date of "2020-01-01T00:00:00.000", minView="hou
var selectedElement = jQuery(jQuery('.hour', element)[3]);
selectedElement.trigger('click');

expect(jQuery('.active', element).text()).toBe('凌晨3点00');
expect(jQuery('.active', element).text()).toBe('凌晨3点00分');
expect($rootScope.date).toEqual(moment('2020-01-01T03:00:00.000').toDate());
});
});
12 changes: 6 additions & 6 deletions test/view/zh_cn/minute.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
$rootScope.$digest();
}));
it('has `.switch` element with a value of 2013-Jan-22 0:00', function () {
expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨12点00');
expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨12点00分');
});
it('has 12 `.minute` elements', function () {
expect(jQuery('.minute', element).length).toBe(12);
Expand All @@ -53,7 +53,7 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
expect(jQuery('.active', element).length).toBe(1);
});
it('`.active` element with a value of 0:00', function () {
expect(jQuery('.active', element).text()).toBe('凌晨12点00');
expect(jQuery('.active', element).text()).toBe('凌晨12点00分');
});
});

Expand All @@ -70,21 +70,21 @@ describe('minute view with initial date of 2013-01-22 1:15', function () {
$rootScope.$digest();
}));
it('has `.switch` element with a value of 2013-Jan-22 1:00', function () {
expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨1点00');
expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨1点00分');
});
it('has 4 `.minute` elements', function () {
expect(jQuery('.minute', element).length).toBe(4);
});
it('has 1 `.active` element with a value of 1:15', function () {
expect(jQuery('.active', element).text()).toBe('凌晨1点15');
expect(jQuery('.active', element).text()).toBe('凌晨1点15分');
});
it('changes date/time to 1:00 to when clicking first `.minute` element with a value of 0:00', function () {
expect(jQuery('.active', element).text()).toBe('凌晨1点15');
expect(jQuery('.active', element).text()).toBe('凌晨1点15分');

var selectedElement = jQuery(jQuery('.minute', element)[0]);
selectedElement.trigger('click');

expect(jQuery('.active', element).text()).toBe('凌晨1点00');
expect(jQuery('.active', element).text()).toBe('凌晨1点00分');
expect($rootScope.date).toEqual(moment('2013-01-22T01:00:00.000').toDate());
});
});