Skip to content

Commit 8692f30

Browse files
jzaeffererjzaefferer
committed
Datepicker rewrite: Fix popups, implement a few hoverables and click
handlers, update input and trigger select event. Add select for switching cultures.
1 parent b4806c1 commit 8692f30

File tree

3 files changed

+75
-28
lines changed

3 files changed

+75
-28
lines changed

‎datepicker-rewrite/date.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,21 @@ $.date = function ( datestring, formatstring ) {
1919
format = formatstring ? formatstring : calendar.patterns.d,
2020
date = datestring ? $.global.parseDate(datestring, format) : new Date();
2121
return {
22+
refresh: function() {
23+
calendar = $.global.culture.calendar;
24+
format = formatstring || calendar.patterns.d;
25+
return this;
26+
},
2227
setFormat: function( formatstring ) {
2328
if (formatstring) {
2429
format = formatstring;
2530
}
2631
return this;
2732
},
33+
setDay: function( day ) {
34+
date = new Date(date.getFullYear(), date.getMonth(), day);
35+
return this;
36+
},
2837
adjust: function( period, offset ) {
2938
var day = period == "D" ? date.getDate() + offset : date.getDate(),
3039
month = period == "M" ? date.getMonth() + offset : date.getMonth(),
@@ -59,7 +68,7 @@ $.date = function ( datestring, formatstring ) {
5968
var result = [],
6069
daysInMonth = this.daysInMonth(),
6170
firstDayOfMonth = new Date(this.year(), date.getMonth(), 1).getDay(),
62-
leadDays = (firstDayOfMonth - calendar.firstDay + 7) % 7
71+
leadDays = (firstDayOfMonth - calendar.firstDay + 7) % 7,
6372
rows = Math.ceil((leadDays + daysInMonth) / 7),
6473
printDate = new Date(this.year(), date.getMonth(), 1 - leadDays);
6574
for (var row = 0; row < rows; row++) {

‎datepicker-rewrite/index.html

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
45
<script src="../jquery-1.4.4.js"></script>
56
<script src="../ui/jquery.ui.core.js"></script>
67
<script src="../ui/jquery.ui.widget.js"></script>
@@ -18,18 +19,31 @@
1819
<style>body{font:62.5% Verdana,Arial,sans-serif}</style>
1920
</head>
2021
<body>
22+
<select id="culture">
23+
<option value="en-US">en-US</option>
24+
<option value="de-DE">de-DE</option>
25+
<option value="ja-JP">ja-JP</option>
26+
</select>
27+
<input id="inline-output" />
2128
<div id="datepicker-inline" style="margin-bottom:100px"></div>
2229
<input id="datepicker" type="text" />
2330
<input id="datepicker2" type="text" />
2431
<script>
25-
jQuery(function($){
26-
//$.preferCulture("de-DE");
27-
$("#datepicker-inline").datepicker();
32+
jQuery(function($) {
33+
$("#culture").change( function() {
34+
$.global.preferCulture( $( this ).val() );
35+
$( ":ui-datepicker" ).datepicker( "refresh" );
36+
})
37+
$("#datepicker-inline").datepicker({
38+
select: function( event, ui ) {
39+
$("#inline-output").val( ui.date );
40+
}
41+
});
2842
$("#datepicker, #datepicker2").datepicker();
2943
});
3044
</script>
3145

32-
<script id="ui-datepicker-div" type="text/x-jquery-tmpl">
46+
<script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
3347
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
3448
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
3549
<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>

‎datepicker-rewrite/picker.js

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,58 +21,82 @@ $.widget( "ui.datepicker", {
2121
},
2222
_create: function() {
2323
var self = this;
24-
self.element
25-
.bind( "mousedown.datepicker", function( event ) {
26-
self.open();
27-
})
28-
.bind( "keydown.datepicker", function( event ) {
29-
30-
});
3124
this.date = $.date();
3225
if (this.element.is("input")) {
26+
self._bind( {
27+
click: "open",
28+
// TODO click on picker should not close
29+
blur: "close"
30+
});
3331
this.picker = $("<div/>").insertAfter(this.element).hide();
32+
this.picker.css({
33+
position: "absolute"
34+
});
3435
} else {
3536
this.inline = true;
3637
this.picker = this.element;
3738
}
39+
this.picker.delegate(".ui-datepicker-prev", "click", function() {
40+
self.date.adjust("M", -1);
41+
self.refresh();
42+
});
43+
this.picker.delegate(".ui-datepicker-next", "click", function() {
44+
self.date.adjust("M", +1)
45+
self.refresh();
46+
});
47+
this.picker.delegate(".ui-datepicker-calendar a", "click", function( event ) {
48+
self.date.setDay( +$(this).text() );
49+
if (!self.inline) {
50+
self.element.val( self.date.format() );
51+
self.close();
52+
}
53+
self._trigger("select", event, {
54+
date: self.date.format(),
55+
});
56+
});
57+
3858
this.refresh();
3959
},
4060
refresh: function() {
61+
this.date.refresh();
4162
this.picker.empty();
42-
// TODO wrapper div get losts when appending to new element, works for inline
43-
$("#ui-datepicker-div").tmpl({
63+
64+
$("#ui-datepicker-tmpl").tmpl({
4465
date: this.date
4566
}).appendTo(this.picker)
46-
.find("button").button().end()
47-
// looks uglyyy
48-
//.find(".ui-datepicker-header a").button();
49-
if (this.inline) {
50-
// against display:none in datepicker.css
51-
this.picker.find(".ui-datepicker").css("display", "block");
52-
}
67+
.find("button").button().end()
68+
69+
// against display:none in datepicker.css
70+
this.picker.find(".ui-datepicker").css("display", "block");
71+
this._hoverable( this.picker.find( ".ui-datepicker-header a" ) );
72+
this._hoverable( this.picker.find( ".ui-datepicker-header a, .ui-datepicker-calendar a" ) );
5373
},
5474
_setOption: function( key, value ) {
5575
$.Widget.prototype._setOption.apply( this, arguments );
5676
if ( key === "" ) {
5777
}
5878
},
5979
open: function( event ) {
60-
this.picker.show();
61-
/*
62-
if (this.picker != this.element) {
80+
this.picker.fadeIn( "fast" );
81+
// would open ever get called for non-inline datepickers?
82+
if (!this.inline) {
6383
this.picker.position({
84+
my: "left top",
85+
at: "left bottom",
6486
of: this.element
6587
});
6688
}
67-
*/
6889
},
6990
close: function( event ) {
70-
this.picker.hide();
91+
this.picker.fadeOut();
7192
},
7293
destroy: function() {
94+
if (!this.inline) {
95+
this.picker.remove();
96+
}
7397
},
7498
widget: function() {
75-
return this.element;
99+
return this.picker;
76100
}
77101
});
78102

0 commit comments

Comments
 (0)