Simple date/time picker component based on the work of Stefan Petre, with contributions taken from Andrew Rowls and jdewit. Demo Default behavior in pt-BR, picks date/time with fast masked input typing (need only to type the numbers, the static part of the mask is inserted automatically if missing) or via the popup widget, which supports year, month, day, hour and minute views.

  • The DateControl is a REALbasic control plugin to create a Date-picker. The Control is displayed according to control panel date settings, or in exclusive mm.dd.yyyy, exclusive
  • SharePoint also offers a DateTime picker control that you can use in your web parts and application pages. This control has the name DateTimeControl and is located in the Microsoft.SharePoint.WebControls namespace of the Microsoft.SharePoint.dll.

A control that the user can click or tap to specify a date.


If you add a Date Picker control instead of a Text input control, you help ensure that the user specifies a date in the correct format.

Key properties

DefaultDate – The initial value of a date control unless the user changes it.

SelectedDate – The date currently selected in a date control. This date is represented in local time.

Format – The text format in which the control shows the date and the user specifies the date. You can set this property to ShortDate (default) or LongDate to format dates based on the Language property of this control. You can also set this property to an expression, such as yyyy/mm/dd if you want the same format regardless of language. For example:

  • The control shows 12/31/2017 if the user clicks or taps the last day of 2017, the Format property is set to ShortDate, and the Language property is set to en-us.
  • The control shows dimanche 31 decembre 2017 if the user clicks or taps the last day of 2017, the Format property is set to LongDate, and the Language property is set to fr-fr.

Language – Determines the language that's used to format dates, including names of months. If this property isn't specified, the user's device setting determines the language. Supported values include 'EN-us' and 'FR'.

Additional properties

AccessibleLabel – Label for screen readers.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DateTimeZone – Whether to display the date in UTC or the user's Local time.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

EndYear – The latest year to which the user can set value of a date-picker control.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

IconFill – The foreground color of a the date picker icon.

IconBackground – The background color of a the date picker icon.

InputTextPlaceholder – Instructional text that appears if no dates are entered.

IsEditable – Whether the datepicker text can be edited. If false, the date can only be changed by using the calendar.

Italic – Whether the text in a control is italic.

OnSelect – How the app responds when the user taps or clicks a control.

OnChange – How the app responds when the user changes the value of a control.

Difference between OnChange and OnSelect: OnSelect and OnChange trigger on the same user action if the user's click causes the change. In this case, OnSelect triggers before OnChange.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

Size – The font size of the text that appears on a control.

StartOfWeek – The day of the week to display in the first day column of the date-picker control.

StartYear – The earliest year to which the user can set the value of a date-picker control.

TabIndex – Keyboard navigation order in relation to other controls.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Related functions

Year( DateTimeValue )


  1. Add a Date Picker control, and name it Deadline.

    Don't know how to add, name, and configure a control?

  2. Add a Label control, and set its Text property to this formula:
    DateDiff(Today(), Deadline.SelectedDate) & ' days to go!'

    Want more information about the DateDiff function or other functions?

  3. Press F5, choose a date in Deadline, and then click or tap OK.

    The Label control shows the number of days between today and the date that you chose.

  4. To return to the default workspace, press Esc.

Accessibility guidelines

Color contrast

  • Standard color contrast requirements apply.

Screen reader support

  • AccessibleLabel must be present.

Keyboard support

  • TabIndex must be zero or greater so that keyboard users can navigate to it.
  • Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.


When the calendar is open, press Page up and Page down to navigate between months and Shift+Page up and Shift+Page down to navigate between years.


Can you tell us about your documentation language preferences? Take a short survey.

The survey will take about seven minutes. No personal data is collected (privacy statement).

Date control module allowing separation of formats for View and Model for Yii Framework 2.0


Installs: 547 561

More Videos For DateControl »

Dependents: 65

Suggesters: 2

Security: 0

Stars: 55

Watchers: 8

Forks: 28

Date control html

Open Issues: 3

Data controller



  • kartik-v/php-date-formatter: >1.3
  • kartik-v/yii2-krajee-base: >=1.9



This package is auto-updated.


Last update: 2021-03-31 09:07:56 UTC

The Date Control module allows controlling date formats of attributes separately for View and Model for Yii Framework 2.0. It thus allows an easy way to work with dates when displaying to users in one way (format / timezone) but saving it in the database in another way (format / timezone).

Refer CHANGE LOG for details on changes to various releases.

NOTE: Version 1.9.5 has BC breaking changes. A new property widgetOptions is available. This property will replace the options property for the scenario when autoWidget or widgetClass is set.

Why Date Control?

When working with the great Yii Framework, one of the most common observations I had was the need to have a proper control on the date settings. The date settings for eachYii application, are unique to each application and region. Most Yii developers or users almost always need an option of displaying date and time in ONE specific format,but save them to database in ANOTHER format. So to summarize, the problem statement was:

  • Lack of a single configuration method to display date & times to user (or VIEW) in ONE format
  • Lack of a configuration method to save date & times in database (or MODEL) in ANOTHER format

Most existing Yii solutions try to overcome the above by setting the format in model->afterFind, present in view, then unformat it in model->setAttribues or model->beforeValidate.This was still an issue when one had many models and views in the application and changes in development cycle, had to be replicated in many places (more complex scenarios being multi-regional formats).

This module helps overcome this large gap by addressing all of these at the presentational level. The module enables one to configure the date and timesettings separately for DISPLAY and SAVE. This can be setup either globally or individually at each DateControl widget level. And if this is not useful enough, itautomatically enables any date/time picker widgets to be used in conjunction with this.

How this magic works, is that the extension just alters this at the presentational layer (VIEW). It automatically sets the base model input to hidden and displaysa mirror input in the display format one has set. Then on each edit of the display input, the extension traps the change event, and overrwrites the hidden base modelinput as per the desired save format. The other good thing is, that the extension automatically triggers the javascript change event for the base model inputas well. Thus all client model validations and other jquery events needed by Picker widgets are automatically triggered.

NOTE: All date and time formats used across this module follow one standard - i.e. PHP Date Time format strings. The extension automaticallyprovides three widgets to display and control the date-time inputs.

  • kartikwidgetsDatePicker or kartikdateDatePicker if your format type is date
  • kartikwidgetsTimePicker or kartiktimeTimePickerif your format type is time
  • kartikwidgetsDateTimePicker or kartiktimeDateTimePicker if your format type is datetime


The extension has been created as a module to enable access to global settings for your application. In addition, it allows you to read and format date timesbetween client and server using PHP DateTime object. The DateControl widget uses ajax processing to convert display (view) format to model (save) format.

Params Configuration

The extension allows configuration of dateControlDisplay and dateControlSave settings at Yii application params level. The params configuration will override the settings at the module level.This configuration is useful when one wants to dynamically change these params settings at runtime. The settings can be overridden at DateControl widget level.

Refer the defaulting rules documentation for details.


The main widget for rendering each date control on your views. Many settings will be defaulted from the module setup, but can be overriddenat the widget level. An usage example with ActiveForm and using kartikwidgetsDateTimePicker is shown below. Note you can pass date-timeformats as supported by ICU or PHP. To set a PHP date time format - prepend the format string with php: as shown below.

NOTE: With version v1.2.0 this extension can use the new Krajee jQuery library php-date-formatter to perform client side date format conversion instead of using ajax, for basic date formats (without timezone).The extension can thus now easily read date & time stamps consistently in ONE format (PHP DateTime) across the client and server. However, it is recommended to use ajaxConversion if you need seamless integration with PHP DateTime functions like timezone support.


You can see detailed documentation and usage and a demonstration on the extension.


The preferred way to install this extension is through composer.

Note: Check the composer.json for this extension's requirements and dependencies.Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.


Either run

or add

to the require section of your composer.json file.

Data Controller Gdpr


Date Control - © Kartik - Krajee


Data Control Language

yii2-datecontrol is released under the BSD 3-Clause License. See the bundled for details.

Coments are closed

Recent News

  • Trash Talker
  • Fade In
  • WorkDone

Scroll to top