2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
Htk.DateChooser = new Class
|
|
|
|
({
|
|
|
|
Extends: Htk.Field
|
|
|
|
,Tag: 'htk-date-chooser'
|
|
|
|
|
|
|
|
,format: _('%a, %e %b %Y')
|
|
|
|
,calendar: null
|
|
|
|
,ignoreCalendarChange: false
|
|
|
|
|
|
|
|
,initialize: function (props)
|
|
|
|
{
|
|
|
|
this.parent (props);
|
|
|
|
this.createElement ('div');
|
2015-03-15 12:44:57 +00:00
|
|
|
this.node.className = 'htk-date-chooser';
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-02-08 15:38:38 +00:00
|
|
|
this.label = document.createElement ('span');
|
2015-01-23 13:09:30 +00:00
|
|
|
this.node.appendChild (this.label);
|
|
|
|
|
|
|
|
this.setEditable (this._editable);
|
|
|
|
}
|
|
|
|
|
|
|
|
,putValue: function (value)
|
|
|
|
{
|
|
|
|
var dateString;
|
|
|
|
|
|
|
|
if (value instanceof Date)
|
|
|
|
dateString = Vn.Date.strftime (value, this.format);
|
|
|
|
else
|
|
|
|
dateString = '';
|
|
|
|
|
|
|
|
Vn.Node.setText (this.label, dateString);
|
|
|
|
}
|
|
|
|
|
|
|
|
,setEditable: function (editable)
|
|
|
|
{
|
|
|
|
if (editable && !this.calendar)
|
|
|
|
{
|
2015-02-08 15:38:38 +00:00
|
|
|
Vn.Node.remove (this.label);
|
|
|
|
|
2015-01-23 13:09:30 +00:00
|
|
|
this.button = document.createElement ('button');
|
|
|
|
this.button.title = _('ChangeDate');
|
|
|
|
this.button.addEventListener ('click', this.showCalendar.bind (this));
|
2015-02-08 15:38:38 +00:00
|
|
|
this.button.appendChild (this.label);
|
|
|
|
this.node.appendChild (this.button);
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-03-06 23:33:54 +00:00
|
|
|
this.calendar = new Htk.Calendar ();
|
|
|
|
this.calendar.on ('changed', this.calendarChanged.bind (this));
|
|
|
|
|
|
|
|
this.popup = new Htk.Popup ();
|
|
|
|
this.popup.setChild (this.calendar);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
else if (!editable)
|
|
|
|
{
|
2015-02-08 15:38:38 +00:00
|
|
|
Vn.Node.remove (this.label);
|
|
|
|
this.node.appendChild (this.label);
|
2015-01-23 13:09:30 +00:00
|
|
|
this.calendar = null;
|
|
|
|
this.node.removeChild (this.button);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,calendarChanged: function (calendar)
|
|
|
|
{
|
|
|
|
if (this.ignoreCalendarChange)
|
|
|
|
return;
|
|
|
|
|
2015-03-06 23:33:54 +00:00
|
|
|
this.popup.hide ();
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
var newDate = calendar.value;
|
|
|
|
this.putValue (newDate);
|
|
|
|
this.valueChanged (newDate);
|
|
|
|
}
|
|
|
|
|
|
|
|
,showCalendar: function (event)
|
|
|
|
{
|
|
|
|
this.ignoreCalendarChange = true;
|
|
|
|
this.calendar.value = this._value;
|
|
|
|
this.calendar.goToSelectedMonth ();
|
|
|
|
this.ignoreCalendarChange = false;
|
2015-03-06 23:33:54 +00:00
|
|
|
|
|
|
|
this.popup.show (this.button);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|