mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-27 17:18:54 +01:00
Add time picker popup
This commit is contained in:
Nathan Gray
parent
268be2c8b9
commit
1d74169848
@ -50,105 +50,31 @@ var et2_date = et2_inputWidget.extend({
|
||||
|
||||
this.span = $j(document.createElement("span")).addClass("et2_date");
|
||||
|
||||
if(this._type == "date" || this._type == "date-time")
|
||||
{
|
||||
this.input_date = $j(document.createElement("input"));
|
||||
var type=(this._type == "date-timeonly" ? "time" : "text");
|
||||
this.input_date.addClass("et2_date").attr("type", type).attr("size", 5)
|
||||
.appendTo(this.span);
|
||||
}
|
||||
|
||||
// If date also has a time
|
||||
if(this._type == "date-time" || this._type == "date-timeonly")
|
||||
{
|
||||
var input_time = $j(document.createElement("input")).attr("type", "time");
|
||||
if(input_time.attr("type") == "time")
|
||||
{
|
||||
this.input_time = input_time;
|
||||
this.input_time.appendTo(this.span).attr("size", 5);
|
||||
// Update internal value if control changes
|
||||
this.input_time.change(this,function(e){e.data.set_value($j(e.target).val());});
|
||||
}
|
||||
else
|
||||
{
|
||||
// browser doesn't support HTML5 time type
|
||||
this._make_time_selects(this.span);
|
||||
}
|
||||
}
|
||||
this.setDOMNode(this.span[0]);
|
||||
|
||||
// jQuery-UI date picker
|
||||
if(this._type != 'date-timeonly')
|
||||
{
|
||||
this.egw().calendar(this.input_date, this._type == "date-time");
|
||||
}
|
||||
else
|
||||
{
|
||||
this.egw().time(this.input_date);
|
||||
}
|
||||
},
|
||||
|
||||
_make_time_selects: function (node) {
|
||||
var timeformat = this.egw().preference("timeformat");
|
||||
this.input_hours = $j(document.createElement("select"));
|
||||
for(var i = 0; i < 24; i++)
|
||||
{
|
||||
var time = i;
|
||||
if(timeformat == 12)
|
||||
{
|
||||
switch(i)
|
||||
{
|
||||
case 0:
|
||||
time = "12 am";
|
||||
break;
|
||||
case 12: time = "12 pm";
|
||||
break;
|
||||
default:
|
||||
time = i % 12 + " " + (i < 12 ? "am" : "pm");
|
||||
}
|
||||
}
|
||||
else if (time < 10)
|
||||
{
|
||||
time = "0" + time;
|
||||
}
|
||||
var option = $j(document.createElement("option")).attr("value", i).text(time);
|
||||
option.appendTo(this.input_hours);
|
||||
}
|
||||
this.input_hours.appendTo(node).change(this, function(e) {
|
||||
if(e.data.type == "date-timeonly")
|
||||
{
|
||||
e.data.set_value(e.target.options[e.target.selectedIndex].value + ":" + $j('option:selected',e.data.input_minutes).text());
|
||||
}
|
||||
else
|
||||
{
|
||||
e.data.date.setHours(e.target.options[e.target.selectedIndex].value);
|
||||
e.data.set_value(e.data.date);
|
||||
}
|
||||
});
|
||||
node.append(":");
|
||||
this.input_minutes = $j(document.createElement("select"));
|
||||
for(var i = 0; i < 60; i+=5)
|
||||
{
|
||||
var time = i;
|
||||
if(time < 10)
|
||||
{
|
||||
time = "0"+time;
|
||||
}
|
||||
var option = $j(document.createElement("option")).attr("value", time).text(time);
|
||||
option.appendTo(this.input_minutes);
|
||||
}
|
||||
this.input_minutes.appendTo(node).change(this, function(e) {
|
||||
if(e.data.type == "date-timeonly")
|
||||
{
|
||||
e.data.set_value($j('option:selected',e.data.input_hours).val() + ":" + e.target.options[e.target.selectedIndex].text);
|
||||
}
|
||||
else
|
||||
{
|
||||
e.data.date.setMinutes(e.target.options[e.target.selectedIndex].value);
|
||||
e.data.set_value(e.data.date);
|
||||
}
|
||||
});
|
||||
},
|
||||
set_type: function(_type) {
|
||||
this.type = _type;
|
||||
this.createInputWidget();
|
||||
},
|
||||
|
||||
set_value: function(_value) {
|
||||
if(_value == null)
|
||||
if(_value == null || _value == 0)
|
||||
{
|
||||
this.value = _value;
|
||||
|
||||
@ -156,10 +82,6 @@ var et2_date = et2_inputWidget.extend({
|
||||
{
|
||||
this.input_date.val("");
|
||||
}
|
||||
if(this.input_time)
|
||||
{
|
||||
this.input_time.val("");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@ -167,28 +89,8 @@ var et2_date = et2_inputWidget.extend({
|
||||
if(typeof _value == 'string' && isNaN(_value)) {
|
||||
if(_value.indexOf(":") > 0 && this.type == "date-timeonly") {
|
||||
this.value = _value;
|
||||
// HTML5
|
||||
if(!this.input_hours)
|
||||
{
|
||||
return this._super.apply(this, [_value]);
|
||||
}
|
||||
else
|
||||
{
|
||||
var parts = _value.split(":");
|
||||
$j("option[value='"+parts[0]+"']",this.input_hours).attr("selected","selected");
|
||||
if($j("option[value='"+parseInt(parts[1])+"']",this.input_minutes).length == 0)
|
||||
{
|
||||
// Selected an option that isn't in the list
|
||||
var i = parseInt(parts[1]);
|
||||
var option = $j(document.createElement("option")).attr("value", i).text(i < 10 ? "0"+i : i).attr("selected","selected");
|
||||
option.appendTo(this.input_minutes);
|
||||
}
|
||||
else
|
||||
{
|
||||
$j("option[value='"+parts[1]+"']",this.input_minutes).attr("selected","selected");
|
||||
}
|
||||
this.input_date.timepicker('setTime',_value);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
var text = new Date(_value);
|
||||
|
||||
@ -207,30 +109,7 @@ var et2_date = et2_inputWidget.extend({
|
||||
this.date = _value;
|
||||
}
|
||||
|
||||
if(this.input_date)
|
||||
{
|
||||
this.input_date.datepicker('setDate',this.date);
|
||||
}
|
||||
if(this.input_time)
|
||||
{
|
||||
this.input_time.val(date("H:i", this.date));
|
||||
}
|
||||
if(this.input_hours)
|
||||
{
|
||||
$j("option[value='"+date("H",this.date)+"']",this.input_hours).attr("selected","selected");
|
||||
}
|
||||
if(this.input_minutes)
|
||||
{
|
||||
if($j("option[value='"+parseInt(date("i",this.date))+"']",this.input_minutes).length == 0)
|
||||
{
|
||||
// Selected an option that isn't in the list
|
||||
var i = date("i",this.date);
|
||||
var option = $j(document.createElement("option")).attr("value", i).text(i).attr("selected","selected");
|
||||
option.appendTo(this.input_minutes);
|
||||
} else {
|
||||
$j("option[value='"+date("i",this.date)+"']",this.input_minutes).attr("selected","selected");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getValue: function() {
|
||||
|
||||
1326
phpgwapi/js/jquery/jquery-ui-timepicker-addon.js
vendored
Normal file
1326
phpgwapi/js/jquery/jquery-ui-timepicker-addon.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@ -13,7 +13,8 @@
|
||||
"use strict";
|
||||
|
||||
/*egw:uses
|
||||
jquery.jquery_ui;
|
||||
jquery.jquery-ui;
|
||||
jquery.jquery-ui-timepicker-addon;
|
||||
|
||||
egw_core;
|
||||
egw_preferences;
|
||||
@ -42,6 +43,16 @@ egw.extend('calendar', egw.MODULE_WND_LOCAL, function(_app, _wnd) {
|
||||
};
|
||||
};
|
||||
|
||||
function timePreferences(_egw)
|
||||
{
|
||||
return {
|
||||
"timeFormat": egw.preference("timeformat") == 12 ? "h:mm tt" : "hh:mm",
|
||||
"ampm": (egw.preference("timeformat") == "12"),
|
||||
"hourGrid": 4,
|
||||
"minuteGrid": 10
|
||||
}
|
||||
};
|
||||
|
||||
function setupCalendar(_egw, _input, _time, _callback, _context)
|
||||
{
|
||||
var prefs = calendarPreferences(_egw);
|
||||
@ -60,7 +71,15 @@ egw.extend('calendar', egw.MODULE_WND_LOCAL, function(_app, _wnd) {
|
||||
}
|
||||
|
||||
// Get the preferences
|
||||
if(_time)
|
||||
{
|
||||
params = jQuery.extend(params, timePreferences(_egw));
|
||||
_wnd.jQuery(_input).datetimepicker(params);
|
||||
}
|
||||
else
|
||||
{
|
||||
_wnd.$j(_input).datepicker(params);
|
||||
}
|
||||
/*
|
||||
onClose: function(date_text, picker) {
|
||||
// Only update if there's a change - "" if no date selected
|
||||
@ -78,11 +97,19 @@ egw.extend('calendar', egw.MODULE_WND_LOCAL, function(_app, _wnd) {
|
||||
*/
|
||||
};
|
||||
|
||||
/**
|
||||
* Set up an input to have a time selection popup
|
||||
*/
|
||||
function setupTime(_egw, _input, _callback, _context)
|
||||
{
|
||||
_wnd.jQuery(_input).timepicker(timePreferences(_egw));
|
||||
}
|
||||
|
||||
/**
|
||||
* Translate, and set as default values
|
||||
*
|
||||
*/
|
||||
function translate() {
|
||||
function translateCalendar() {
|
||||
var translate_fields = {
|
||||
// These ones are simple strings
|
||||
"nextText": false,
|
||||
@ -137,22 +164,50 @@ egw.extend('calendar', egw.MODULE_WND_LOCAL, function(_app, _wnd) {
|
||||
_wnd.jQuery.datepicker.setDefaults(regional);
|
||||
};
|
||||
|
||||
/**
|
||||
This should be global, static, run once, but adding this part breaks egw's js juggling
|
||||
*/
|
||||
function translateTimepicker()
|
||||
{
|
||||
var translate_fields = {
|
||||
// These ones are simple strings
|
||||
"timeOnlyTitle": false,
|
||||
"timeText": false,
|
||||
"hourText": false,
|
||||
"minuteText": false,
|
||||
"currentText": false,
|
||||
"closeText": false
|
||||
};
|
||||
var regional = {};
|
||||
var full = [];
|
||||
for(var i in translate_fields)
|
||||
{
|
||||
var trans = _wnd.jQuery.timepicker._defaults[i];
|
||||
if(typeof trans === 'string')
|
||||
{
|
||||
trans = egw().lang(trans);
|
||||
}
|
||||
regional[i] = trans;
|
||||
}
|
||||
_wnd.jQuery.timepicker.setDefaults(regional);
|
||||
};
|
||||
|
||||
// Static initialization
|
||||
|
||||
// Set template's icon for date popup - could probably use jquery-ui icons
|
||||
var css = this.module('css',_wnd);
|
||||
css.css(".et2_date input.et2_date", "background-image: url(" + egw().image('datepopup') + ")");
|
||||
/*
|
||||
css.css(".et2_date input.hasDatepicker:hover", "background-image: url(" + egw().image('datepopup') + ")");
|
||||
|
||||
// Translate only once
|
||||
var ready = this.module('ready', _wnd);
|
||||
ready.ready(translate,this);
|
||||
*/
|
||||
ready.ready(translateCalendar,this);
|
||||
ready.ready(translateTimepicker,this);
|
||||
|
||||
return {
|
||||
|
||||
calendar: function(_input, _time, _callback, _context) {
|
||||
setupCalendar(this, _input, _time, _callback, _context);
|
||||
},
|
||||
time: function(_input, _callback, _context) {
|
||||
setupTime(this, _input, _callback, _context);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user