TDatePicker displays a text box for date input purpose.
When the text box receives focus, a calendar will pop up and users can
pick up from it a date that will be automatically entered into the text box.
The format of the date string displayed in the text box is determined by
the DateFormat property. Valid formats are the combination of the
following tokens,
Character Format Pattern (en-US)
-----------------------------------------
d day digit
dd padded day digit e.g. 01, 02
M month digit
MM padded month digit
MMMM localized month name, e.g. March, April
yy 2 digit year
yyyy 4 digit year
-----------------------------------------
TDatePicker has four Mode to show the date picker popup.
# Basic -- Only shows a text input, focusing on the input shows the
date picker. This way you can access the popup using only
the keyboard. Note that because of this, TAB-bing through
this control will automatically select the current date if
no previous date was selected. If you close the popup (eg.
pressing the ESC key) you'll need to un-focus and re-focus
the control again for the popup to reappear.
# Clickable -- Only shows a text input, clicking on the input shows the
date picker. This mode solves the two small problems of the
Basic mode. It was first introduced in Prado 3.2.
# Button -- Shows a button next to the text input, clicking on the
button shows the date, button text can be by the
ButtonText property
# ImageButton -- Shows an image next to the text input, clicking on
the image shows the date picker, image source can be
change through the ButtonImageUrl property.
The CssClass property can be used to override the css class name
for the date picker panel. CalendarStyle property sets the packages
styles available. E.g. default.
The InputMode property can be set to "TextBox" or "DropDownList" with
default as "TextBox".
In DropDownList mode, in addition to the popup date picker, three
drop down list (day, month and year) are presented to select the date .
The PositionMode property can be set to "Top" or "Bottom" with default
as "Bottom". It specifies the position of the calendar popup, relative to the
input field.
protected function createDateControl($container, $column, $record)
{
$value = $this->getRecordPropertyValue($column, $record);
$control = new TDatePicker();
$control->setFromYear(1900);
$control->setInputMode(TDatePickerInputMode::DropDownList);
$control->setDateFormat('yyyy-MM-dd');
if (!empty($value)) {
$control->setDate(substr($value, 0, 10));
}
$control->setCssClass('date-dropdown');
$this->setNotNullProperty($container, $control, $column, $record);
return $control;
}
/**
* Client-side Text property can only be updated after the OnLoad stage.
* @param string text content for the textbox
*/
public function setText($value)
{
if (parent::getText() === $value) {
return;
}
parent::setText($value);
if ($this->getActiveControl()->canUpdateClientSide() && $this->getHasLoadedPostData()) {
$cb = $this->getPage()->getCallbackClient();
$cb->setValue($this, $value);
if ($this->getInputMode() == TDatePickerInputMode::DropDownList) {
$s = new TDateTimeStamp();
$date = $s->getDate($this->getTimeStampFromText());
$id = $this->getClientID();
$cb->select($id . TControl::CLIENT_ID_SEPARATOR . 'day', 'Value', $date['mday'], 'select');
$cb->select($id . TControl::CLIENT_ID_SEPARATOR . 'month', 'Value', $date['mon'] - 1, 'select');
$cb->select($id . TControl::CLIENT_ID_SEPARATOR . 'year', 'Value', $date['year'], 'select');
}
}
}