new datepicker
This commit is contained in:
Graham Knop
parent
797b1d2cc6
commit
4a93766bf9
6 changed files with 197 additions and 44 deletions
|
|
@ -1,6 +1,7 @@
|
|||
7.5.6
|
||||
- Internationalized Calendar templates
|
||||
- fixed: exporting as HTML leaks sessions for inaccessible assets,
|
||||
- new YUI based date picker
|
||||
|
||||
7.5.5
|
||||
- fixed: Several typos in the new Calendar help documentation.
|
||||
|
|
|
|||
|
|
@ -193,32 +193,23 @@ sub toHtml {
|
|||
# NOTE: Cannot fix time zone since we don't have a complete date/time
|
||||
}
|
||||
|
||||
my $language = WebGUI::International->new($self->session)->getLanguage($self->session->user->profileField("language"),"languageAbbreviation");
|
||||
unless ($language) {
|
||||
$language = WebGUI::International->new($self->session)->getLanguage("English","languageAbbreviation");
|
||||
}
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/calendar.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/lang/calendar-'.$language.'.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/calendar-setup.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setLink($self->session->url->extras('calendar/calendar-win2k-1.css'), { rel=>"stylesheet", type=>"text/css", media=>"all" });
|
||||
my $mondayFirst = $self->session->user->profileField("firstDayOfWeek") ? "1" : "0";
|
||||
return WebGUI::Form::Text->new($self->session,
|
||||
$self->session->style->setLink($self->session->url->extras('yui/build/calendar/assets/skins/sam/calendar.css'), { rel=>"stylesheet", type=>"text/css", media=>"all" });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/calendar/calendar-min.js'),{ type=>'text/javascript' });
|
||||
my $firstDow = $self->session->user->profileField("firstDayOfWeek");
|
||||
$self->session->style->setRawHeadTags("<script type=\"text/javascript\">var webguiFirstDayOfWeek = $firstDow</script>");
|
||||
$self->session->style->setScript($self->session->url->extras('yui-webgui/build/datepicker/datepicker.js'),{ type=>'text/javascript' });
|
||||
|
||||
return WebGUI::Form::Text->new($self->session,
|
||||
name=>$self->get("name"),
|
||||
value=>$value,
|
||||
size=>$self->get("size"),
|
||||
extras=>$self->get("extras"),
|
||||
id=>$self->get('id'),
|
||||
extras=>$self->get("extras") . ' onfocus="YAHOO.WebGUI.Form.DatePicker.display(this);"',
|
||||
id=>$self->get('id'),
|
||||
maxlength=>$self->get("maxlength")
|
||||
)->toHtml . '<script type="text/javascript">
|
||||
Calendar.setup({
|
||||
inputField : "'.$self->get('id').'",
|
||||
ifFormat : "%Y-%m-%d",
|
||||
showsTime : false,
|
||||
step : 1,
|
||||
timeFormat : "12",
|
||||
firstDay : '.$mondayFirst.'
|
||||
});
|
||||
</script>';
|
||||
)->toHtml;
|
||||
}
|
||||
|
||||
#-------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -168,33 +168,23 @@ sub toHtml {
|
|||
->set_time_zone($self->session->user->profileField("timeZone"))
|
||||
->toMysql;
|
||||
}
|
||||
my $i18n = WebGUI::International->new($self->session);
|
||||
my $language = $i18n->getLanguage($self->session->user->profileField("language"),"languageAbbreviation");
|
||||
unless ($language) {
|
||||
$language = $i18n->getLanguage("English","languageAbbreviation");
|
||||
}
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/calendar.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/lang/calendar-'.$language.'.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('calendar/calendar-setup.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setLink($self->session->url->extras('calendar/calendar-win2k-1.css'), { rel=>"stylesheet", type=>"text/css", media=>"all" });
|
||||
my $mondayFirst = $self->session->user->profileField("firstDayOfWeek") ? "true" : "false";
|
||||
$self->session->style->setLink($self->session->url->extras('yui/build/calendar/assets/skins/sam/calendar.css'), { rel=>"stylesheet", type=>"text/css", media=>"all" });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/event/event-min.js'),{ type=>'text/javascript' });
|
||||
$self->session->style->setScript($self->session->url->extras('yui/build/calendar/calendar-min.js'),{ type=>'text/javascript' });
|
||||
my $firstDow = $self->session->user->profileField("firstDayOfWeek");
|
||||
$self->session->style->setRawHeadTags("<script type=\"text/javascript\">window.webguiFirstDayOfWeek = $firstDow</script>");
|
||||
$self->session->style->setScript($self->session->url->extras('yui-webgui/build/datepicker/datepicker.js'),{ type=>'text/javascript' });
|
||||
|
||||
return WebGUI::Form::Text->new($self->session,
|
||||
name=>$self->get("name"),
|
||||
value=>$value,
|
||||
size=>$self->get("size"),
|
||||
extras=>$self->get("extras"),
|
||||
id=>$self->get('id'),
|
||||
extras=>$self->get("extras") . ' onfocus="YAHOO.WebGUI.Form.DatePicker.display(this, true);"',
|
||||
id=>$self->get('id'),
|
||||
maxlength=>$self->get("maxlength")
|
||||
)->toHtml . '<script type="text/javascript">
|
||||
Calendar.setup({
|
||||
inputField : "'.$self->get('id').'",
|
||||
ifFormat : "%Y-%m-%d %H:%M:%S",
|
||||
showsTime : true,
|
||||
step : 1,
|
||||
timeFormat : "12",
|
||||
firstDay : '.$mondayFirst.'
|
||||
});
|
||||
</script>';
|
||||
)->toHtml;
|
||||
}
|
||||
|
||||
#-------------------------------------------------------------------
|
||||
|
|
|
|||
0
www/extras/yui-webgui/build/datepicker/datepicker.css
Normal file
0
www/extras/yui-webgui/build/datepicker/datepicker.css
Normal file
143
www/extras/yui-webgui/build/datepicker/datepicker.js
vendored
Normal file
143
www/extras/yui-webgui/build/datepicker/datepicker.js
vendored
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
YAHOO.namespace('WebGUI.Form');
|
||||
YAHOO.WebGUI.Form.DatePicker = {
|
||||
init: function() {
|
||||
this.time = {};
|
||||
var container = document.createElement('div');
|
||||
YAHOO.util.Dom.setStyle(container, 'font-size', '9pt');
|
||||
YAHOO.util.Dom.setStyle(container, 'position', 'absolute');
|
||||
YAHOO.util.Dom.setStyle(container, 'top', '0');
|
||||
YAHOO.util.Dom.addClass(container, 'yui-skin-sam');
|
||||
document.body.appendChild(container);
|
||||
var cal = document.createElement('div');
|
||||
YAHOO.util.Dom.generateId(cal);
|
||||
YAHOO.util.Dom.setStyle(cal, 'display', 'none');
|
||||
container.appendChild(cal);
|
||||
var config = {
|
||||
title: "Choose a date:",
|
||||
close: true,
|
||||
DATE_FIELD_DELIMITER: '-',
|
||||
DATE_RANGE_DELIMITER: '/',
|
||||
MDY_YEAR_POSITION: 1,
|
||||
MDY_MONTH_POSITION: 2,
|
||||
MDY_DAY_POSITION: 3
|
||||
};
|
||||
if (window.webguiFirstDayOfWeek) {
|
||||
config.START_WEEKDAY = webguiFirstDayofWeek;
|
||||
}
|
||||
this.calendar = new YAHOO.widget.Calendar(null, cal, config);
|
||||
this.calendar.selectEvent.subscribe(this.handleSelect, this, true);
|
||||
this.calendar.beforeShowEvent.subscribe(this.handleBeforeShow, this, true);
|
||||
this.calendar.showEvent.subscribe(this.handleShow, this, true);
|
||||
this.calendar.beforeHideEvent.subscribe(this.handleHide, this, true);
|
||||
this.calendar.renderEvent.subscribe(this.handleRender, this, true);
|
||||
this.calendar.render();
|
||||
},
|
||||
handleRender: function(e) {
|
||||
this.timediv = document.createElement('div');
|
||||
YAHOO.util.Dom.setStyle(this.timediv, 'text-align', 'center');
|
||||
this.calendar.oDomContainer.appendChild(this.timediv);
|
||||
this.timediv.appendChild(document.createTextNode('Time: '));
|
||||
this.hourEl = document.createElement('input');
|
||||
this.hourEl.value = '00';
|
||||
this.hourEl.setAttribute('size', 2);
|
||||
this.hourEl.setAttribute('maxlength', 2);
|
||||
this.timediv.appendChild(this.hourEl);
|
||||
this.timediv.appendChild(document.createTextNode(' : '));
|
||||
this.minuteEl = document.createElement('input');
|
||||
this.minuteEl.value = '00';
|
||||
this.minuteEl.setAttribute('size', 2);
|
||||
this.minuteEl.setAttribute('maxlength', 2);
|
||||
this.timediv.appendChild(this.minuteEl);
|
||||
this.secEl = document.createElement('input');
|
||||
this.secEl.value = '00';
|
||||
this.secEl.setAttribute('size', 2);
|
||||
this.secEl.setAttribute('maxlength', 2);
|
||||
YAHOO.util.Dom.setStyle(this.secEl, 'display', 'none');
|
||||
this.timediv.appendChild(this.secEl);
|
||||
this.calendar.oDomContainer.appendChild(this.timediv);
|
||||
YAHOO.util.Event.on(this.hourEl, 'change', this.handleTimebox, [this.hourEl, 'hour'], this);
|
||||
YAHOO.util.Event.on(this.minuteEl, 'change', this.handleTimebox, [this.minuteEl, 'minute'], this);
|
||||
},
|
||||
handleTimebox: function(e, obj) {
|
||||
var input = obj[0];
|
||||
var type = obj[1];
|
||||
var val = parseInt(input.value);
|
||||
if (!val)
|
||||
val = 0;
|
||||
val = val % (type == 'hour' ? 24 : 60);
|
||||
input.value = (val < 10 ? '0' : '') + val;
|
||||
},
|
||||
handleBeforeShow: function(e) {
|
||||
YAHOO.util.Event.on(this.inputBox, 'change', this.handleChange, this, true);
|
||||
this.handleChange();
|
||||
},
|
||||
handleShow: function(e) {
|
||||
var pos = YAHOO.util.Dom.getRegion(this.inputBox);
|
||||
YAHOO.util.Dom.setXY(this.calendar.oDomContainer, [pos.left, pos.bottom]);
|
||||
YAHOO.util.Dom.setStyle(this.timediv, 'display', ( this.useTime ? 'block' : 'none'));
|
||||
},
|
||||
handleHide: function(e) {
|
||||
YAHOO.util.Event.removeListener(this.inputBox, 'change', this.handleChange);
|
||||
},
|
||||
handleSelect: function(e) {
|
||||
var sel = this.calendar.getSelectedDates()[0];
|
||||
var month = sel.getMonth() + 1;
|
||||
var day = sel.getDate();
|
||||
var year = sel.getFullYear();
|
||||
this.inputBox.value = '' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day + '-' + year;
|
||||
this.inputBox.value = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
|
||||
if (this.useTime) {
|
||||
var hour = 1 * this.hourEl.value;
|
||||
var minute = 1 * this.minuteEl.value;
|
||||
var sec = 1 * this.secEl.value;
|
||||
this.inputBox.value += ' ' + (hour < 10 ? '0' : '') + hour + ':' + (minute < 10 ? '0' : '') + minute + ':' + (sec < 10 ? '0' : '') + sec;
|
||||
}
|
||||
if (!this.codeSelect) {
|
||||
this.calendar.hide();
|
||||
}
|
||||
},
|
||||
display: function(el, time) {
|
||||
this.calendar.hide();
|
||||
this.inputBox = YAHOO.util.Dom.get(el);
|
||||
this.useTime = time;
|
||||
this.calendar.show();
|
||||
},
|
||||
handleChange: function(e) {
|
||||
if ((this.inputBox.value != "") && (!this.codeSelect)) {
|
||||
this.codeSelect = true;
|
||||
var date;
|
||||
var res;
|
||||
var hour, min, sec;
|
||||
if(res = this.inputBox.value.match(/(\d+)-(\d+)-(\d+)(?: (\d+):(\d+):(\d+))?/)) {
|
||||
date = res[1] + '-' + res[2] + '-' + res[3];
|
||||
if (res[4]) {
|
||||
hour = (res[4] < 10 ? '0' : '') + (1 * res[4]);
|
||||
min = (res[5] < 10 ? '0' : '') + (1 * res[5]);
|
||||
sec = (res[6] < 10 ? '0' : '') + (1 * res[6]);
|
||||
}
|
||||
}
|
||||
if (!hour)
|
||||
hour = '00';
|
||||
if (!min)
|
||||
min = '00';
|
||||
if (!sec)
|
||||
sec = '00';
|
||||
this.hourEl.value = hour;
|
||||
this.minuteEl.value = min;
|
||||
this.secEl.value = sec;
|
||||
this.calendar.select(date);
|
||||
var selectedDates = this.calendar.getSelectedDates();
|
||||
if (selectedDates.length > 0) {
|
||||
var firstDate = selectedDates[0];
|
||||
this.calendar.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "-" + firstDate.getFullYear());
|
||||
this.calendar.render();
|
||||
}
|
||||
this.hourEl.value = hour;
|
||||
this.minuteEl.value = min;
|
||||
this.secEl.value = sec;
|
||||
this.codeSelect = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.WebGUI.Form.DatePicker.init, YAHOO.WebGUI.Form.DatePicker, true);
|
||||
|
||||
28
www/extras/yui-webgui/build/datepicker/example.html
Normal file
28
www/extras/yui-webgui/build/datepicker/example.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>WebGUI Date picker control</title>
|
||||
<link rel="stylesheet" type="text/css" href="/extras/yui/build/calendar/assets/skins/sam/calendar.css">
|
||||
<script type="text/javascript" src="/extras/yui/build/yahoo/yahoo-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/event/event-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/dom/dom-min.js" ></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/calendar/calendar-min.js"></script>
|
||||
<script type="text/javascript">
|
||||
function getWebguiProperty (propName) {
|
||||
var props = new Array();
|
||||
props["extrasURL"] = "/extras/";
|
||||
props["pageURL"] = "/home";
|
||||
return props[propName];
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="datepicker.css" />
|
||||
<script type="text/javascript" src="datepicker.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input maxlength="10" name="date" type="text" size="10" id="date_formId" onfocus="YAHOO.WebGUI.Form.DatePicker.display(this)"/>
|
||||
<input maxlength="19" name="datetime" type="text" size="19" id="date_formId" onfocus="YAHOO.WebGUI.Form.DatePicker.display(this, true)"/>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue