Main Content

DatePicker

Date picker UI component

  • Date picker UI component

Description

A date picker UI component allows an app user to a select a date from an interactive calendar. Use the DatePicker object to modify the appearance and behavior of a date picker after you create it.

Creation

Create a date picker in an app using the uidatepicker function.

Properties

expand all

Date Picker

Selected date, specified as a datetime object within the range of the Limits property. To make the selected date unspecified, set this property to NaT.

If the specified datetime object contains time information, only the date information is preserved in the Value property.

Example: d = uidatepicker('Value',datetime('today'))

Data Types: datetime

Placeholder text, specified as a character vector or string scalar. The placeholder provides a short hint to describe the expected input. The text shows only when the Value property is NaT.

Example: 'aaaa/mm/dd'

Selection limits, specified as a 1-by-2 datetime array. The second value in this array must be later than the first value. The default value is [datetime(0000,1,1) datetime(9999,12,31)]. This default value starts at the earliest possible date and ends at the latest possible date that DatePicker supports.

In the running app, the date picker allows the user to select dates on the closed interval defined by this property. If there are disabled dates or disabled days within the interval, then those dates and days are excluded.

Example: d = uidatepicker('Limits',[datetime('today') datetime(2050,1,1)])

Data Types: datetime

Display format for the date picker text field, specified as a character vector or string scalar. The default format depends on the locale of the system running the app.

The format you specify must use valid letter identifiers that correspond to the Unicode® Locale Data Markup Language (LDML) standard for dates and times. To separate fields, you can include nonletter characters such as a hyphen, space, colon, or any non-ASCII characters.

Example: d = uidatepicker('DisplayFormat','dd/MM/yy')

Examples of Common Formats

This table lists common display formats. The examples show formatted output for the date, Wednesday, April 9, 2014.

Value of FormatExample
'yyyy-MM-dd'2014-04-09
'dd/MM/yyyy'09/04/2014
'dd.MM.yyyy'09.04.2014
'yyyy年 MM月 dd日'2014年 04月 09日
'MMMM d, yyyy'April 9, 2014

All Date and Time Formats

Use these letter identifiers to create a display format. The third column of this table shows output for the date, Wednesday, April 9, 2014.

Letter IdentifierDescriptionDisplay
GEraCE
yYear, with no leading zeros.2014
yyYear, using last two digits.14
yyy, yyyy ...Year, using at least as many digits as there are instances of 'y'For the year 2014, 'yyy' displays 2014, while 'yyyyy' displays 02014.
u, uu, ...ISO year, a single number designating the year.2014
QQuarter, using one digit2
QQQuarter, using two digits02
QQQQuarter, abbreviatedQ2
QQQQQuarter, full name2nd quarter
MMonth, numerical, using one or two digits4
MMMonth, numerical, using two digits04
MMMMonth, abbreviated nameApr
MMMMMonth, full nameApril
MMMMMMonth, capitalized first letterA
WWeek of the month, using one digit2
dDay of the month, using one or two digits9
ddDay of the month, using two digits09
DDay of the year, using one, two, or three digits99
DDDay of the year, using two digits99
DDDDay of the year using three digits099
eDay of the week, numerical, using one or two digits4, where Sunday is the first day of the week
eeDay of the week, numerical, using two digits04
eeeDay, abbreviated nameWed
eeeeDay, full nameWednesday
eeeeeDay, capitalized first letterW

Note

  • The edit field in the running app accepts delimited numeric values, even when the DisplayFormat includes words. For instance, if the month format is specified as 'MMMM', the app accepts a numeric month such as 04, but will display a month name such as 'April'.

  • If the user specifies a day-of-year number in the running app, and the format contains identifiers for both the day of year (D) and Gregorian year (y), then datetime might not read the day-of-year number correctly. Use ISO year (u) in place of y.

  • Use one or more u characters instead of y characters to represent the year when working with year numbers near zero.

Disabled dates, specified as an m-by-1 datetime array. This property specifies dates that are not available for selection in the running app.

Example: d = uidatepicker('DisabledDates',datetime(2018,1,1)) disables January 1, 2018.

The datetime array cannot not contain any NaT values, and the dates must be sorted in ascending order.

To reenable all previously disabled dates, call NaT(0) to create an empty datetime array:

d.DisabledDates = NaT(0);

Data Types: datetime

Disabled days of the week, specified as one of the following:

  • Empty array [], which enables all days of the week.

  • Vector of whole numbers in the range [1, 7]. The numbers correspond to the days of the week. For example, [1 3] disables Sundays and Tuesdays.

  • 1-D cell array of character vectors, where the array elements contain localized day names. Partial day names must be unambiguous. For example, {'F','Sa'} disables Fridays and Saturdays.

  • String vector containing full or partial localized day names.

When you specify day names using a cell array or string vector, the code works only in the locale that you write the code. To make the code work in any locale, specify this property as a vector of numbers.

Data Types: double | cell | string

Font and Color

Font name, specified as a system supported font name. The default font depends on the specific operating system and locale.

If the specified font is not available, then MATLAB® uses the best match among the fonts available on the system where the app is running.

Example: 'Arial'

Font size, specified as a positive number. The units of measurement are pixels. The default font size depends on the specific operating system and locale.

Example: 14

Font weight, specified as one of these values:

  • 'normal' — Default weight as defined by the particular font

  • 'bold' — Thicker character outlines than 'normal'

Not all fonts have a bold font weight. For fonts that do not, specifying 'bold' results in the normal font weight.

Font angle, specified as 'normal' or 'italic'. Not all fonts have an italic font angle. For fonts that do not, specifying 'italic' results in the normal font angle.

Font color, specified as an RGB triplet, a hexadecimal color code, or one of the options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

  • An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

  • A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color NameShort NameRGB TripletHexadecimal Color CodeAppearance
"red""r"[1 0 0]"#FF0000"

Sample of the color red

"green""g"[0 1 0]"#00FF00"

Sample of the color green

"blue""b"[0 0 1]"#0000FF"

Sample of the color blue

"cyan" "c"[0 1 1]"#00FFFF"

Sample of the color cyan

"magenta""m"[1 0 1]"#FF00FF"

Sample of the color magenta

"yellow""y"[1 1 0]"#FFFF00"

Sample of the color yellow

"black""k"[0 0 0]"#000000"

Sample of the color black

"white""w"[1 1 1]"#FFFFFF"

Sample of the color white

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB uses in many types of plots.

RGB TripletHexadecimal Color CodeAppearance
[0 0.4470 0.7410]"#0072BD"

Sample of RGB triplet [0 0.4470 0.7410], which appears as dark blue

[0.8500 0.3250 0.0980]"#D95319"

Sample of RGB triplet [0.8500 0.3250 0.0980], which appears as dark orange

[0.9290 0.6940 0.1250]"#EDB120"

Sample of RGB triplet [0.9290 0.6940 0.1250], which appears as dark yellow

[0.4940 0.1840 0.5560]"#7E2F8E"

Sample of RGB triplet [0.4940 0.1840 0.5560], which appears as dark purple

[0.4660 0.6740 0.1880]"#77AC30"

Sample of RGB triplet [0.4660 0.6740 0.1880], which appears as medium green

[0.3010 0.7450 0.9330]"#4DBEEE"

Sample of RGB triplet [0.3010 0.7450 0.9330], which appears as light blue

[0.6350 0.0780 0.1840]"#A2142F"

Sample of RGB triplet [0.6350 0.0780 0.1840], which appears as dark red

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

  • An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

  • A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color NameShort NameRGB TripletHexadecimal Color CodeAppearance
"red""r"[1 0 0]"#FF0000"

Sample of the color red

"green""g"[0 1 0]"#00FF00"

Sample of the color green

"blue""b"[0 0 1]"#0000FF"

Sample of the color blue

"cyan" "c"[0 1 1]"#00FFFF"

Sample of the color cyan

"magenta""m"[1 0 1]"#FF00FF"

Sample of the color magenta

"yellow""y"[1 1 0]"#FFFF00"

Sample of the color yellow

"black""k"[0 0 0]"#000000"

Sample of the color black

"white""w"[1 1 1]"#FFFFFF"

Sample of the color white

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB uses in many types of plots.

RGB TripletHexadecimal Color CodeAppearance
[0 0.4470 0.7410]"#0072BD"

Sample of RGB triplet [0 0.4470 0.7410], which appears as dark blue

[0.8500 0.3250 0.0980]"#D95319"

Sample of RGB triplet [0.8500 0.3250 0.0980], which appears as dark orange

[0.9290 0.6940 0.1250]"#EDB120"

Sample of RGB triplet [0.9290 0.6940 0.1250], which appears as dark yellow

[0.4940 0.1840 0.5560]"#7E2F8E"

Sample of RGB triplet [0.4940 0.1840 0.5560], which appears as dark purple

[0.4660 0.6740 0.1880]"#77AC30"

Sample of RGB triplet [0.4660 0.6740 0.1880], which appears as medium green

[0.3010 0.7450 0.9330]"#4DBEEE"

Sample of RGB triplet [0.3010 0.7450 0.9330], which appears as light blue

[0.6350 0.0780 0.1840]"#A2142F"

Sample of RGB triplet [0.6350 0.0780 0.1840], which appears as dark red

Interactivity

State of visibility, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

  • 'on' — Display the object.

  • 'off' — Hide the object without deleting it. You still can access the properties of an invisible UI component.

To make your app start faster, set the Visible property to 'off' for all UI components that do not need to appear at startup.

Allow edit field changes, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

Set this property to 'on' to allow the user to change the date in the edit field at run time. The Enable property must also be set to 'on' to allow changes in the edit field.

Operational state, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

  • If you set this property to 'on', the app user can interact with the component.

  • If you set this property to 'off', the component appears dimmed, indicating that the app user cannot interact with it, and that it will not trigger a callback.

Tooltip, specified as a character vector, cell array of character vectors, string array, or 1-D categorical array. Use this property to display a message when the user hovers the pointer over the component at run time. The tooltip displays even when the component is disabled. To display multiple lines of text, specify a cell array of character vectors or a string array. Each element in the array becomes a separate line of text. If you specify this property as a categorical array, MATLAB uses the values in the array, not the full set of categories.

Context menu, specified as a ContextMenu object created using the uicontextmenu function. Use this property to display a context menu when you right-click on a component.

Position

Location and size of the collapsed date picker relative to the parent container, specified as a vector of the form [left bottom width height]. This table describes each element in the vector.

ElementDescription
leftDistance from the inner left edge of the parent container to the outer left edge of the date picker
bottomDistance from the inner bottom edge of the parent container to the outer bottom edge of the date picker
widthDistance between the right and left outer edges of the date picker
heightDistance between the top and bottom outer edges of the date picker

All measurements are in pixel units.

Location and size of the collapsed date picker relative to the parent container, specified as a vector of the form [left bottom width height]. This property value is identical to the Position property.

Location and size of the collapsed date picker relative to the parent container, specified as a vector of the form [left bottom width height]. This property value is identical to the Position property.

Layout options, specified as a GridLayoutOptions object. This property specifies options for components that are children of grid layout containers. If the component is not a child of a grid layout container (for example, it is a child of a figure or panel), then this property is empty and has no effect. However, if the component is a child of a grid layout container, you can place the component in the intended row and column of the grid by setting the Row and Column properties of the GridLayoutOptions object.

For example, this code places a date picker in the third row and second column of its parent grid.

g = uigridlayout([4 3]);
d = uidatepicker(g);
d.Layout.Row = 3;
d.Layout.Column = 2;

To make the date picker span multiple rows or columns, specify the Row or Column property as a two-element vector. For example, this date picker spans columns 2 through 3:

d.Layout.Column = [2 3];

Callbacks

Value changed function, specified as one of the following:

  • A function handle.

  • A cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • A character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

The ValueChangedFcn callback executes when the user changes the date by typing in the text field or by expanding the date picker and selecting a date.

This callback function can access specific information about the user’s interaction with the date picker. MATLAB passes this information in a ValueChangedData object as the second argument to your callback function. In App Designer, the argument is called event. You can get the object properties using dot notation. For example, event.PreviousValue gets the previously selected date. The ValueChangedData object is not available to callback functions specified as character vectors.

The following table lists the properties of the ValueChangedData object.

PropertyValue
ValueNew selected date
PreviousValuePreviously selected date
SourceComponent that executes the callback
EventName'ValueChanged'

The ValueChangedFcn callback does not execute when the user re-selects or re-types the currently selected date. The callback also does not execute when the Value property changes programmatically.

For more information about creating callbacks in App Designer, see Callbacks in App Designer.

Object creation function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB creates the object. MATLAB initializes all property values before executing the CreateFcn callback. If you do not specify the CreateFcn property, then MATLAB executes a default creation function.

Setting the CreateFcn property on an existing component has no effect.

If you specify this property as a function handle or cell array, you can access the object that is being created using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Object deletion function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB deletes the object. MATLAB executes the DeleteFcn callback before destroying the properties of the object. If you do not specify the DeleteFcn property, then MATLAB executes a default deletion function.

If you specify this property as a function handle or cell array, you can access the object that is being deleted using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Callback Execution Control

Callback interruption, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

This property determines if a running callback can be interrupted. There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

MATLAB determines callback interruption behavior whenever it executes a command that processes the callback queue. These commands include drawnow, figure, uifigure, getframe, waitfor, and pause.

If the running callback does not contain one of these commands, then no interruption occurs. MATLAB first finishes executing the running callback, and later executes the interrupting callback.

If the running callback does contain one of these commands, then the Interruptible property of the object that owns the running callback determines if the interruption occurs:

  • If the value of Interruptible is 'off', then no interruption occurs. Instead, the BusyAction property of the object that owns the interrupting callback determines if the interrupting callback is discarded or added to the callback queue.

  • If the value of Interruptible is 'on', then the interruption occurs. The next time MATLAB processes the callback queue, it stops the execution of the running callback and executes the interrupting callback. After the interrupting callback completes, MATLAB then resumes executing the running callback.

Note

Callback interruption and execution behave differently in these situations:

  • If the interrupting callback is a DeleteFcn, CloseRequestFcn, or SizeChangedFcn callback, then the interruption occurs regardless of the Interruptible property value.

  • If the running callback is currently executing the waitfor function, then the interruption occurs regardless of the Interruptible property value.

  • If the interrupting callback is owned by a Timer object, then the callback executes according to schedule regardless of the Interruptible property value.

Note

When an interruption occurs, MATLAB does not save the state of properties or the display. For example, the object returned by the gca or gcf command might change when another callback executes.

Callback queuing, specified as 'queue' or 'cancel'. The BusyAction property determines how MATLAB handles the execution of interrupting callbacks. There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

The BusyAction property determines callback queuing behavior only when both of these conditions are met:

  • The running callback contains a command that processes the callback queue, such as drawnow, figure, uifigure, getframe, waitfor, or pause.

  • The value of the Interruptible property of the object that owns the running callback is 'off'.

Under these conditions, the BusyAction property of the object that owns the interrupting callback determines how MATLAB handles the interrupting callback. These are possible values of the BusyAction property:

  • 'queue' — Puts the interrupting callback in a queue to be processed after the running callback finishes execution.

  • 'cancel' — Does not execute the interrupting callback.

This property is read-only.

Deletion status, returned as an on/off logical value of type matlab.lang.OnOffSwitchState.

MATLAB sets the BeingDeleted property to 'on' when the DeleteFcn callback begins execution. The BeingDeleted property remains set to 'on' until the component object no longer exists.

Check the value of the BeingDeleted property to verify that the object is not about to be deleted before querying or modifying it.

Parent/Child

Parent container, specified as a Figure object created using the uifigure function, or one of its child containers: Tab, Panel, ButtonGroup, or GridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Visibility of the object handle, specified as 'on', 'callback', or 'off'.

This property controls the visibility of the object in its parent's list of children. When an object is not visible in its parent's list of children, it is not returned by functions that obtain objects by searching the object hierarchy or querying properties. These functions include get, findobj, clf, and close. Objects are valid even if they are not visible. If you can access an object, you can set and get its properties, and pass it to any function that operates on objects.

HandleVisibility ValueDescription
'on'The object is always visible.
'callback'The object is visible from within callbacks or functions invoked by callbacks, but not from within functions invoked from the command line. This option blocks access to the object at the command-line, but allows callback functions to access it.
'off'The object is invisible at all times. This option is useful for preventing unintended changes to the UI by another function. Set the HandleVisibility to 'off' to temporarily hide the object during the execution of that function.

Identifiers

This property is read-only.

Type of graphics object, returned as 'uidatepicker'.

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

User data, specified as any MATLAB array. For example, you can specify a scalar, vector, matrix, cell array, character array, table, or structure. Use this property to store arbitrary data on an object.

If you are working in App Designer, create public or private properties in the app to share data instead of using the UserData property. For more information, see Share Data Within App Designer Apps.

Object Functions

focusFocus UI component

Examples

collapse all

Create a date picker that displays the date in the text field using the dd-MM-yyyy format. The watermark in the running app displays the new format, and all selected dates use that format.

fig = uifigure('Position',[500 500 320 280]);
d = uidatepicker(fig,'Position',[18 235 150 22]);
d.DisplayFormat = 'dd-MM-yyyy';

Date picker in a UI figure window. The date picker has watermark text "dd-mm-yyyy".

Create a date picker that disables Sundays and New Year's day 2018.

fig = uifigure('Position',[500 500 375 280]);
d = uidatepicker(fig,'Position',[18 225 150 22]);
d.DisabledDaysOfWeek = 1;
d.DisabledDates = datetime(2018,1,1);

When you expand the date picker and browse to January 2018, the first day of the year and all Sundays are disabled.

Date picker in a UI figure window. The date picker is expanded and displays dates in January 2018. January 1st and days that fall on Sunday are dimmed and crossed out.

Create a program file called mydateapp.m that creates a figure and a date picker with a ValueChangedFcn callback.

function mydateapp
fig = uifigure('Position',[340 400 415 300]);
d = uidatepicker(fig,'DisplayFormat','MM-dd-yyyy',...
    'Position',[130 190 150 22],...
    'Value',datetime(2014,4,9),...
    'ValueChangedFcn', @datechange);

    function datechange (src,event)
        lastdate = char(event.PreviousValue);
        newdate = char(event.Value);
        msg = ['Change date from ' lastdate ' to ' newdate '?'];
        % Confirm new date
        selection = uiconfirm(fig,msg,'Confirm Date');
        
        if (strcmp(selection,'Cancel'))
            % Revert to previous selection if cancelled
            d.Value = event.PreviousValue;
        end
    end
end

The datechange function displays a confirmation dialog box and determines which button the user clicks in that dialog box. The date picker reverts to the previous date if the user clicks Cancel.

Run the program, and click a date to see the confirmation dialog box.

mydateapp

On the left is a UI figure window with a date picker. April 9th, 2014 is selected, and the cursor is hovering on April 15th, 2014. On the right is a UI figure with a confirmation dialog with text: "Change date from 04-09-2014 to 04-15-2014?".

Version History

Introduced in R2018a

expand all