\Kendo\UI\DateTimePicker

A PHP wrapper for Kendo UI DateTimePicker.

Inherits from \Kendo\UI\Widget.

Usage

To use DateTimePicker in a PHP page instantiate a new instance, configure it via the available configuration methods and output it by echo-ing the result of the render method.

Using Kendo DateTimePicker

<?php
// Create a new instance of DateTimePicker and specify its id
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');

// Configure it
$dateTimePicker->adaptiveMode('value')

// Output it

echo $dateTimePicker->render();
?>

Methods

ARIATemplate

Specifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->ARIATemplate('value');
?>

adaptiveMode

Specifies the adaptive rendering of the component. The supported values are: none (default), auto.The adaptive rendering of the DateTimePicker provides consistency to the customer experience on any device by supporting adaptive enhancements such as changes in styling and behavior.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->adaptiveMode('value');
?>

animation

Configures the opening and closing animations of the popups. Setting the animation option to false will disable the opening and closing animations. As a result the popup will open and close instantly. is not a valid configuration.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value boolean|\Kendo\UI\DateTimePickerAnimation|array

Example - using boolean

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->animation(true);
?>

Example - using \Kendo\UI\DateTimePickerAnimation 

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$animation = new \Kendo\UI\DateTimePickerAnimation();
$close = new \Kendo\UI\DateTimePickerAnimationClose();
$animation->close($close);
$dateTimePicker->animation($animation);
?>

Example - using array

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$close = new \Kendo\UI\DateTimePickerAnimationClose();
$dateTimePicker->animation(array('close' => $close));
?>

autoAdjust

If this property is enabled and you have configured min and/or max values, and the user enters a value that falls out of that range, the value will automatically be set to either the minimum or maximum allowed value. This property has effect only when the dateInput of the component is enabled.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value boolean

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->autoAdjust(true);
?>

autoCorrectParts

Sets a value that indicates whether to automatically correct the segment when out of range. In order to work, dateInput prop should be set to true.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value boolean

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->autoCorrectParts(true);
?>

change

Triggered when the underlying value of a DateTimePicker is changed. For additional information check the change event documentation.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->change('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onChange(e) {
        // handle the change event.
    }
</script>
<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->change('onChange');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->change(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

close

Fires when the calendar or the time drop-down list is closed For additional information check the close event documentation.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->close('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onClose(e) {
        // handle the close event.
    }
</script>
<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->close('onClose');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->close(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

componentType

Specifies the component type of the widget. "classic" - Uses the standard rendering of the widget. or "modern" - Uses new rendering with a fresh and modern look and feel..

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->componentType('value');
?>

culture

Specifies the culture info used by the widget.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->culture('value');
?>

dateInput

Specifies if the DateTimePicker will use DateInput for editing value

Returns

\Kendo\UI\DateTimePicker

Parameters

$value boolean

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->dateInput(true);
?>

dates

Specifies a list of dates, which will be passed to the month template of the DateView. All dates, which match the date portion of the selected date will be used to re-bind the TimeView.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value array

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->dates(array());
?>

depth

Specifies the navigation depth of the calendar. The following settings are available for the depth value: "month" - Shows the days of the month.; "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->depth('value');
?>

endTime

If set, specifies the latest time the TimeView can show.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value date

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->endTime(new date());
?>

fillMode

Sets a value controlling how the color is applied. Can also be set to the following string values: "none"; "solid"; "flat" or "outline".

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->fillMode('value');
?>

The template which renders the footer of the calendar. If false, the footer will not be rendered.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->footer('value');
?>

format

Specifies the format, which is used to format the value of the DateTimePicker displayed in the input. The format also will be used to parse the input.For more information on date and time formats please refer to Date Formatting.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->format('value');
?>

interval

Specifies the interval between values in the popup list. When the componentType is set to classic, the interval is specified in minutes (numeric values). or When the componentType is set to modern, the interval is specified as an object of hours, minutes and seconds..

Returns

\Kendo\UI\DateTimePicker

Parameters

$value float|

Example - using float

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->interval(1);
?>

label

Adds a label before the datetimepicker. If the datetimepicker has no id attribute, a generated id will be assigned. The string and the function parameters are setting the inner HTML of the label.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string|\Kendo\JavaScriptFunction|\Kendo\UI\DateTimePickerLabel|array

Example - using string

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->label('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->label(new \Kendo\JavaScriptFunction('function() { }'));
?>

Example - using \Kendo\UI\DateTimePickerLabel 

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$label = new \Kendo\UI\DateTimePickerLabel();
$content = 'value';
$label->content($content);
$dateTimePicker->label($label);
?>

Example - using array

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$content = 'value';
$dateTimePicker->label(array('content' => $content));
?>

max

Specifies the maximum date, which the calendar can show.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value date

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->max(new date());
?>

messages

Allows localization of the strings that are used in the widget.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value \Kendo\UI\DateTimePickerMessages|array

Example - using \Kendo\UI\DateTimePickerMessages 

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$messages = new \Kendo\UI\DateTimePickerMessages();
$weekColumnHeader = 'value';
$messages->weekColumnHeader($weekColumnHeader);
$dateTimePicker->messages($messages);
?>

Example - using array

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$weekColumnHeader = 'value';
$dateTimePicker->messages(array('weekColumnHeader' => $weekColumnHeader));
?>

min

Specifies the minimum date that the calendar can show.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value date

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->min(new date());
?>

month

Templates for the cells rendered in the calendar "month" view.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value \Kendo\UI\DateTimePickerMonth|array

Example - using \Kendo\UI\DateTimePickerMonth 

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$month = new \Kendo\UI\DateTimePickerMonth();
$content = 'value';
$month->content($content);
$dateTimePicker->month($month);
?>

Example - using array

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$content = 'value';
$dateTimePicker->month(array('content' => $content));
?>

open

Fires when the calendar or the time drop-down list is opened For additional information check the open event documentation.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->open('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onOpen(e) {
        // handle the open event.
    }
</script>
<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->open('onOpen');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->open(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

parseFormats

Specifies the formats, which are used to parse the value set with value() method or by direct input. If not set the value of the options.format and options.timeFormat will be used. Note that value of the format option is always used. The timeFormat value also will be used if defined.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value array

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->parseFormats(array());
?>

The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value \Kendo\UI\DateTimePickerPopup|array

Example - using \Kendo\UI\DateTimePickerPopup 

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$popup = new \Kendo\UI\DateTimePickerPopup();
$appendTo = 'value';
$popup->appendTo($appendTo);
$dateTimePicker->popup($popup);
?>

Example - using array

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$appendTo = 'value';
$dateTimePicker->popup(array('appendTo' => $appendTo));
?>

rounded

Sets a value controlling the border radius. Can also be set to the following string values: "none"; "small"; "medium"; "large" or "full".

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->rounded('value');
?>

size

Sets a value controlling size of the component. Can also be set to the following string values: "small"; "medium"; "large" or "none".

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->size('value');
?>

start

Specifies the start view of the calendar. The following settings are available for the start value: "month" - Shows the days of the month.; "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->start('value');
?>

startTime

If set, specifies the earliest time the TimeView can show.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value date

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->startTime(new date());
?>

timeFormat

Specifies the format, which is used to format the values in the time drop-down list.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value string

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->timeFormat('value');
?>

value

Specifies the selected value.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value date

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->value(new date());
?>

weekNumber

If set to true a week of the year will be shown on the left side of the calendar. It is possible to define a template in order to customize what will be displayed.

Returns

\Kendo\UI\DateTimePicker

Parameters

$value boolean

Example

<?php
$dateTimePicker = new \Kendo\UI\DateTimePicker('DateTimePicker');
$dateTimePicker->weekNumber(true);
?>
In this article
Related articles
Not finding the help you need?