Skip to content
Permalink
Browse files

Datepicker #3647: added enable, disable, destroy buttons to visual te…

…st. Fixed failing localisation tests. Fixed RTL support and selected day highlighting for keyboard navigation.
  • Loading branch information
Ca-Phun Ung
Ca-Phun Ung committed Dec 22, 2008
1 parent bc5df74 commit 3522a23b507f049a8917401bd6acaa928ae37ed8
Showing with 68 additions and 12 deletions.
  1. +4 −6 tests/datepicker.js
  2. +53 −0 tests/visual/datepicker.html
  3. +11 −6 ui/ui.datepicker.js
@@ -423,6 +423,7 @@ test('enableDisable', function() {
inp.datepicker('destroy');
// Inline
var inl = init('#inl');
var dp = $('.ui-datepicker-inline', inl);
ok(!inl.datepicker('isDisabled'), 'Enable/disable inline - initially marked as enabled');
ok($('.ui-datepicker-disabled', inl).length == 0, 'Enable/disable inline - cover initially absent');
inl.datepicker('disable');
@@ -1185,24 +1186,21 @@ test('events', function() {

test('localisation', function() {
var inp = init('#inp', $.datepicker.regional['fr']);
inp.datepicker('option', {dateFormat: 'DD, d MM yy', showButtonPanel:true}).val('').datepicker('show');
inp.datepicker('option', {dateFormat: 'DD, d MM yy', showButtonPanel:true, changeMonth:true, changeYear:true}).val('').datepicker('show');
var dp = $('#ui-datepicker-div');
equals($('.ui-datepicker-close', dp).text(), 'Fermer', 'Localisation - close');
$('.ui-datepicker-close', dp).simulate('mouseover');
equals($('.ui-datepicker-prev', dp).text(), '<Préc', 'Localisation - previous');
equals($('.ui-datepicker-current', dp).text(), 'Courant', 'Localisation - current');
equals($('.ui-datepicker-next', dp).text(), 'Suiv>', 'Localisation - next');
equals($('.ui-datepicker-current', dp).text(), 'Courant', 'Localisation - current');
var month = 0;
$('.ui-datepicker-new-month option', dp).each(function() {
$('.ui-datepicker-month option', dp).each(function() {
equals($(this).text(), $.datepicker.regional['fr'].monthNames[month],
'Localisation - month ' + month);
month++;
});
equals($('.ui-datepicker-calendar th:first', dp).text(),
$.datepicker.regional['fr'].weekHeader, 'Localisation - week header');
var day = 1;
$('.ui-datepicker-calendar th a', dp).each(function() {
$('.ui-datepicker-calendar th', dp).each(function() {
equals($(this).text(), $.datepicker.regional['fr'].dayNamesMin[day],
'Localisation - day ' + day);
day = (day + 1) % 7;
@@ -9,28 +9,81 @@
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
// simple datepicker
$('#d1').datepicker();
$('button.disable-d1').click(function(event){
$('#d1').datepicker('disable');
event.preventDefault();
});
$('button.enable-d1').click(function(event){
$('#d1').datepicker('enable');
event.preventDefault();
});
$('button.destroy-d1').click(function(event){
$('#d1').datepicker('destroy');
event.preventDefault();
});

// multi datepicker
$('#d2').datepicker({numberOfMonths: 3, showButtonPanel: true});
$('button.disable-d2').click(function(event){
$('#d2').datepicker('disable');
event.preventDefault();
});
$('button.enable-d2').click(function(event){
$('#d2').datepicker('enable');
event.preventDefault();
});
$('button.destroy-d2').click(function(event){
$('#d2').datepicker('destroy');
event.preventDefault();
});

// inline datepicker
$('#inl').datepicker();
$('button.disable-inl').click(function(event){
$('#inl').datepicker('disable');
event.preventDefault();
});
$('button.enable-inl').click(function(event){
$('#inl').datepicker('enable');
event.preventDefault();
});
$('button.destroy-inl').click(function(event){
$('#inl').datepicker('destroy');
event.preventDefault();
});
});
</script>
</head>
<body>

<ul class="plugins">
<li class="plugin">
<button class="disable-d1">Disable</button>
<button class="enable-d1">Enable</button>
<button class="destroy-d1">Destroy</button>

Datepicker Simple
<div>
<input type="text" id="d1">
</div>
</li>
<li class="plugin">
<button class="disable-d2">Disable</button>
<button class="enable-d2">Enable</button>
<button class="destroy-d2">Destroy</button>

Datepicker Multi
<div>
<input type="text" id="d2">
</div>
</li>
<li class="plugin">
<button class="disable-inl">Disable</button>
<button class="enable-inl">Enable</button>
<button class="destroy-inl">Destroy</button>

Datepicker Inline
<div id="inl"></div>
</li>
@@ -337,6 +337,7 @@ $.extend(Datepicker.prototype, {
});
$target.prepend('<div class="' + this._disableClass + '" style="' +
($.browser.msie ? 'background-color: transparent; ' : '') +
'position: absolute;' +
'width: ' + inline.width() + 'px; height: ' + inline.height() +
'px; left: ' + (offset.left - relOffset.left) +
'px; top: ' + (offset.top - relOffset.top) + 'px;"></div>');
@@ -443,6 +444,7 @@ $.extend(Datepicker.prototype, {
_doKeyDown: function(event) {
var inst = $.datepicker._getInst(event.target);
var handled = true;
var isRTL = inst.dpDiv.is('.ui-datepicker-rtl');
inst._keyEvent = true;
if ($.datepicker._datepickerShowing)
switch (event.keyCode) {
@@ -472,7 +474,7 @@ $.extend(Datepicker.prototype, {
case 36: if (event.ctrlKey || event.metaKey) $.datepicker._gotoToday(event.target);
handled = event.ctrlKey || event.metaKey;
break; // current on ctrl or command +home
case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -1, 'D');
case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? +1 : -1), 'D');
handled = event.ctrlKey || event.metaKey;
// -1 day on ctrl or command +left
if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
@@ -483,7 +485,7 @@ $.extend(Datepicker.prototype, {
case 38: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -7, 'D');
handled = event.ctrlKey || event.metaKey;
break; // -1 week on ctrl or command +up
case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +1, 'D');
case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? -1 : +1), 'D');
handled = event.ctrlKey || event.metaKey;
// +1 day on ctrl or command +right
if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
@@ -589,12 +591,16 @@ $.extend(Datepicker.prototype, {
css({width: dims.width, height: dims.height})
.end()
.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
.bind('mouseover', function(){
$(this).addClass('ui-state-hover');
})
.bind('mouseout', function(){
$(this).removeClass('ui-state-hover');
})
.bind('mouseover', function(){
$(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
$(this).addClass('ui-state-hover');
})
.end()
.find('.' + this._dayOverClass + ' a')
.trigger('mouseover')
.end();
var numMonths = this._getNumberOfMonths(inst);
inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') +
@@ -1279,7 +1285,6 @@ $.extend(Datepicker.prototype, {
}
}
}
// controls and links
var prevText = this._get(inst, 'prevText');
prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText,
this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),

0 comments on commit 3522a23

Please sign in to comment.
You can’t perform that action at this time.