Skip to content

Calendar rebase #1316

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.

Sign up for GitHub

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
fnagel wants to merge 26 commits into from
Closed

Calendar rebase #1316

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
0f431a6
Datepicker: Introduce value option
fnagel May 15, 2014
6d393ea
Calendar: Add calendar widget
fnagel Jun 3, 2014
2925e71
Calendar: Add min and max option.
fnagel Jun 4, 2014
69736ca
Calendar: Remove select callback reference
fnagel Jun 4, 2014
a6bc8b9
Datepicker: Code clean up for events
fnagel Jun 5, 2014
b7f5d13
Datepicker: Remove unwanted keyboard shortcut
fnagel Jun 5, 2014
6fc0e99
Datepicker: Simplify usage of calendar options and avoid duplications
fnagel Jun 12, 2014
d8cff5e
Datepicker tests: Add open and close unit tests
fnagel Jun 16, 2014
03a26ff
Datepicker: Improve document click event
fnagel Jun 17, 2014
d443def
Calendar: Fix broken day table cell attributes
fnagel Jun 17, 2014
1c33a3a
Datepicker tests: Rewrite event unit tests
fnagel Jun 17, 2014
57d86fc
Calendar: Fix multiple calendar styles
fnagel Jun 17, 2014
6e57cdd
Calendar: Fix German localization
fnagel Jun 17, 2014
f980cb8
Datepicker: Fix localization demo
fnagel Jun 18, 2014
a66a8c5
Datepicker: Several minor code improvements
fnagel Jun 18, 2014
e32c4a7
Calendar: Fix hover event setting and removing
fnagel Jun 18, 2014
34c1a32
Calendar: Improve code style and clean up
fnagel Jun 19, 2014
c649c85
Calendar: Focus class is not removed when using arrow keys
fnagel Jun 19, 2014
c34f013
Datepicker: Remove unwanted CTRL+HOME shortcut
fnagel Jun 19, 2014
5182ba5
Datepicker: Remove support for enter key on input
fnagel Jun 19, 2014
338baee
Datepicker: Improve localization handling, code style
fnagel Jun 19, 2014
a7412cf
Calendar: Add buttons option
fnagel Jun 19, 2014
9cba180
Calendar: Adjust files to match reorganization of external directory
fnagel Jul 2, 2014
fde83f2
Datepicker tests: Remove pass-through options unit tests
fnagel Aug 29, 2014
6a1e8bc
Calendar: Use _on for link hover events
fnagel Aug 30, 2014
5a6596d
Datepicker: Add missing handling for disabled option
fnagel Sep 1, 2014
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
Prev Previous commit
Next Next commit
Calendar: Add min and max option. 
Improve render day cell mechanism.
  • Loading branch information
@fnagel
fnagel committed Sep 21, 2014
commit 2925e71c76f7b57d0870666049da1cf82c6a343f
11 changes: 9 additions & 2 deletions demos/calendar/min-max.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#calendar" ).calendar({ minDate: -20, maxDate: "+1M +10D" });
var now = new Date(),
dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 1 ),
dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 8 );

$( "#calendar" ).calendar({
min: dateMin,
max: dateMax
});
});
</script>
</head>
Expand All @@ -25,7 +32,7 @@
<div id="calendar"></div>

<div class="demo-description">
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
<p>Restrict the range of selectable dates with the <code>min</code> and <code>max</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)).</p>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions tests/unit/calendar/calendar_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ TestHelpers.commonWidgetTests( "calendar", {
dateFormat: { date: "short" },
disabled: false,
eachDay: $.noop,
max: null,
min: null,
numberOfMonths: 1,
showWeek: false,
value: null,
Expand Down
35 changes: 33 additions & 2 deletions tests/unit/calendar/calendar_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,10 @@ test( "value", function() {
});

test( "valueAsDate", function() {
expect( 5 );
expect( 12 );

var element = $( "#calendar" ).calendar(),
var minDate, maxDate, dateAndTimeToSet, dateAndTimeClone,
element = $( "#calendar" ).calendar(),
date1 = new Date( 2008, 6 - 1, 4 ),
date2 = new Date();

Expand All @@ -73,6 +74,36 @@ test( "valueAsDate", function() {

element.calendar( "valueAsDate", date1, date2 );
TestHelpers.calendar.equalsDate(element.calendar( "valueAsDate" ), date1, "Set date - two dates" );

// With minimum/maximum
element = $( "#calendar" ).calendar();
date1 = new Date( 2008, 1 - 1, 4 );
date2 = new Date( 2008, 6 - 1, 4 );
minDate = new Date( 2008, 2 - 1, 29 );
maxDate = new Date( 2008, 3 - 1, 28 );

element.calendar( "option", { min: minDate } ).calendar( "valueAsDate", date2 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date2, "Set date min/max - value > min" );

element.calendar( "valueAsDate", date1 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date2, "Set date min/max - value < min" );

element.calendar( "option", { max: maxDate, min: null } ).calendar( "valueAsDate", date1 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value < max" );

element.calendar( "valueAsDate", date2 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value > max" );

element.calendar( "option", { min: minDate } ).calendar( "valueAsDate", date1 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value < min" );

element.calendar( "valueAsDate", date2 );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value > max" );

dateAndTimeToSet = new Date( 2008, 3 - 1, 28, 1, 11, 0 );
dateAndTimeClone = new Date( 2008, 3 - 1, 28, 1, 11, 0 );
element.calendar( "valueAsDate", dateAndTimeToSet );
equal( dateAndTimeToSet.getTime(), dateAndTimeClone.getTime(), "Date object passed should not be changed by valueAsDate" );
});

})( jQuery );
44 changes: 42 additions & 2 deletions tests/unit/calendar/calendar_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ test( "defaultDate", function() {
*/

test( "min / max", function() {
expect( 0 );
expect( 7 );

/*
// TODO CTRL + PgUp / PgDn is not implemented yet, see wiki
Expand Down Expand Up @@ -260,7 +260,47 @@ test( "min / max", function() {
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
TestHelpers.calendar.equalsDate(inp.calendar( "valueAsDate" ), date, "Min/max - -1w, +1 M +10 D - ctrl+pgdn" );
*/
});

// With existing date
var element = $( "#calendar" ).calendar(),
minDate = new Date( 2008, 2 - 1, 29 ),
maxDate = new Date( 2008, 12 - 1, 7 );

element
.calendar( "option", { min: minDate } )
.calendar( "value", "6/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" );

element
.calendar( "option", { min: minDate } )
.calendar( "value", "1/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" );

element
.calendar( "option", { min: null } )
.calendar( "value", "6/4/08" )
.calendar( "option", { max: maxDate } );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" );

element
.calendar( "option", { max: maxDate } )
.calendar( "value", "1/4/09" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - setDate > max" );

element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "1/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" );

element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "6/4/08" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" );

element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "1/4/09" );
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > max" );});

/*
// TODO: Move this to $.date, Globalize or calendar widget
Copy link
Member

@tjvantoll tjvantoll Aug 23, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine leaving this one in as a TODO until we figure out what we want to do.

Expand Down
2 changes: 2 additions & 0 deletions tests/unit/datepicker/datepicker_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ TestHelpers.commonWidgetTests( "datepicker", {
dateFormat: { date: "short" },
disabled: false,
eachDay: $.noop,
max: null,
min: null,
numberOfMonths: 1,
position: {
my: "left top",
Expand Down
38 changes: 35 additions & 3 deletions tests/unit/datepicker/datepicker_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,13 @@ test( "value", function() {
});

test( "valueAsDate", function() {
expect( 6 );
expect( 13 );

var input = TestHelpers.datepicker.init( "#datepicker" ),
var minDate, maxDate, dateAndTimeToSet, dateAndTimeClone,
input = TestHelpers.datepicker.init( "#datepicker" ),
picker = input.datepicker( "widget" ),
date1 = new Date( 2008, 6 - 1, 4 );
date1 = new Date( 2008, 6 - 1, 4 ),
date2 = new Date();

input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
equal( input.val(), "1/1/14", "Input's value set" );
Expand All @@ -90,6 +92,36 @@ test( "valueAsDate", function() {
ok(input.datepicker( "valueAsDate" ) === null, "Set date - default" );
input.datepicker( "valueAsDate", date1 );
TestHelpers.datepicker.equalsDate(input.datepicker( "valueAsDate" ), date1, "Set date - 2008-06-04" );

// With minimum/maximum
Copy link
Member

@tjvantoll tjvantoll Aug 23, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block of min/max tests seems to duplicate calendar's tests.

Copy link
Member Author

@fnagel fnagel Aug 26, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. This should be changed.

Problem is it's much easier to test this in Datepicker as it has a isValid method. In Calendar I need to check if the selected value has changed even if it shouldn't.

Copy link
Member

@tjvantoll tjvantoll Aug 26, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok. Datepicker uses calendar's _isValid() method, so you could probably use that directly for the purposes of calendar's tests.

Copy link
Member Author

@fnagel fnagel Aug 26, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's okay to use the private method via the widget instance this seems like a good idea!

So, remove the tests from datepicker completely (or leave one test to make sure the interaction works fine) and use _isValid in calendars tests?

Copy link
Member

@tjvantoll tjvantoll Aug 27, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmmm. This applies to more options than min and max. Maybe there should be one test that verifies all of the pass-through options in datepicker's API make it to calendar? It'd be good to get other opinions too. Maybe we can bring this up at the meeting today.

Copy link
Member Author

@fnagel fnagel Aug 27, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe there should be one test that verifies all of the pass-through options in datepicker's API make it to calendar?

Just checking if the value is passed correctly into _setOption method?

Copy link
Member

@tjvantoll tjvantoll Aug 27, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, just retrieve the instance and ensure the option transferred. I'm not sure there's actual value in that though.

Copy link
Member Author

@fnagel fnagel Aug 28, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per the meeting let's go with a single test that loops over datepicker's pass-through options and make sure they're set on the underlying calendar instance.

input = TestHelpers.datepicker.init( "#datepicker" );
date1 = new Date( 2008, 1 - 1, 4 );
date2 = new Date( 2008, 6 - 1, 4 );
minDate = new Date( 2008, 2 - 1, 29 );
maxDate = new Date( 2008, 3 - 1, 28 );

input.val( "" ).datepicker( "option", { min: minDate } ).datepicker( "valueAsDate", date2 );
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date2, "Set date min/max - value > min" );

input.datepicker( "valueAsDate", date1 );
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date2, "Set date min/max - value < min" );

input.val( "" ).datepicker( "option", { max: maxDate, min: null } ).datepicker( "valueAsDate", date1 );
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date1, "Set date min/max - value < max" );

input.datepicker( "valueAsDate", date2 );
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date1, "Set date min/max - value > max" );

input.val( "" ).datepicker( "option", { min: minDate } ).datepicker( "valueAsDate", date1 );
ok( input.datepicker( "valueAsDate" ) === null, "Set date min/max - value < min" );

input.datepicker( "valueAsDate", date2 );
ok( input.datepicker( "valueAsDate" ) === null, "Set date min/max - value > max" );

dateAndTimeToSet = new Date( 2008, 3 - 1, 28, 1, 11, 0 );
dateAndTimeClone = new Date( 2008, 3 - 1, 28, 1, 11, 0 );
input.datepicker( "valueAsDate", dateAndTimeToSet );
equal( dateAndTimeToSet.getTime(), dateAndTimeClone.getTime(), "Date object passed should not be changed by valueAsDate" );
});

test( "isValid", function() {
Expand Down
36 changes: 36 additions & 0 deletions tests/unit/datepicker/datepicker_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,42 @@ test( "showWeek", function() {
input.datepicker( "option", "showWeek", true );
equal( container.find( "thead th" ).length, 8, "supports changing option after init" );
});

test( "min / max", function() {
expect( 14 );

var inp = TestHelpers.datepicker.init( "#datepicker" ),
minDate = new Date( 2008, 2 - 1, 29 ),
maxDate = new Date( 2008, 12 - 1, 7 );

inp.val( "6/4/08" ).datepicker( "option", { min: minDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" );
ok( inp.datepicker( "isValid" ) );

inp.datepicker( "option", { min: null } ).val( "1/4/08" ).datepicker( "option", { min: minDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ), "Min/max - value < min" );
ok( !inp.datepicker( "isValid" ) );

inp.datepicker( "option", { min: null } ).val( "6/4/08" ).datepicker( "option", { max: maxDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" );
ok( inp.datepicker( "isValid" ) );

inp.datepicker( "option", { max: null } ).val( "1/4/09" ).datepicker( "option", { max: maxDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2009, 1 - 1, 4 ), "Min/max - setDate > max" );
ok( !inp.datepicker( "isValid" ) );

inp.datepicker( "option", { max: null } ).val( "1/4/08" ).datepicker( "option", { min: minDate, max: maxDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ), "Min/max - value < min" );
ok( !inp.datepicker( "isValid" ) );

inp.datepicker( "option", { max: null } ).val( "6/4/08" ).datepicker( "option", { min: minDate, max: maxDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" );
ok( inp.datepicker( "isValid" ) );

inp.datepicker( "option", { max: null } ).val( "1/4/09" ).datepicker( "option", { min: minDate, max: maxDate } );
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2009, 1 - 1, 4 ), "Min/max - value > max" );
ok( !inp.datepicker( "isValid" ) );
});

test( "Ticket 7602: Stop datepicker from appearing with beforeOpen event handler", function() {
expect( 3 );
Expand Down
Loading