DatePicker

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

Date Picker

Value — Selected date

NaT (default) | datetime object

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 — Placeholder text

'' (default) | character vector | string scalar

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'

Limits — Selection limits

1-by-2 datetime array

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

DisplayFormat — Display format

character vector | string scalar

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 Format	Example
'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 Identifier	Description	Display
G	Era	CE
y	Year, with no leading zeros.	2014
yy	Year, 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
Q	Quarter, using one digit	2
QQ	Quarter, using two digits	02
QQQ	Quarter, abbreviated	Q2
QQQQ	Quarter, full name	2nd quarter
M	Month, numerical, using one or two digits	4
MM	Month, numerical, using two digits	04
MMM	Month, abbreviated name	Apr
MMMM	Month, full name	April
MMMMM	Month, capitalized first letter	A
W	Week of the month, using one digit	2
d	Day of the month, using one or two digits	9
dd	Day of the month, using two digits	09
D	Day of the year, using one, two, or three digits	99
DD	Day of the year, using two digits	99
DDD	Day of the year using three digits	099
e	Day of the week, numerical, using one or two digits	4, where Sunday is the first day of the week
ee	Day of the week, numerical, using two digits	04
eee	Day, abbreviated name	Wed
eeee	Day, full name	Wednesday
eeeee	Day, capitalized first letter	W

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.

DisabledDates — Disabled dates

empty datetime array (default) | m-by-1 datetime array

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

DisabledDaysOfWeek — Disabled days of week

[] (default) | vector of integers in the range [1, 7] | cell array of character vectors | string vector

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

FontName — Font name

system supported font name

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'

FontSize — Font size

positive number

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

FontWeight — Font weight

'normal' (default) | 'bold'

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.

FontAngle — Font angle

'normal' (default) | 'italic'

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.

FontColor — Font color

[0 0 0] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

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 Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
"red"	"r"	[1 0 0]	"#FF0000"
"green"	"g"	[0 1 0]	"#00FF00"
"blue"	"b"	[0 0 1]	"#0000FF"
"cyan"	"c"	[0 1 1]	"#00FFFF"
"magenta"	"m"	[1 0 1]	"#FF00FF"
"yellow"	"y"	[1 1 0]	"#FFFF00"
"black"	"k"	[0 0 0]	"#000000"
"white"	"w"	[1 1 1]	"#FFFFFF"

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

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	"#0072BD"
[0.8500 0.3250 0.0980]	"#D95319"
[0.9290 0.6940 0.1250]	"#EDB120"
[0.4940 0.1840 0.5560]	"#7E2F8E"
[0.4660 0.6740 0.1880]	"#77AC30"
[0.3010 0.7450 0.9330]	"#4DBEEE"
[0.6350 0.0780 0.1840]	"#A2142F"

BackgroundColor — Background color

[0.96 0.96 0.96] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

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 Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
"red"	"r"	[1 0 0]	"#FF0000"
"green"	"g"	[0 1 0]	"#00FF00"
"blue"	"b"	[0 0 1]	"#0000FF"
"cyan"	"c"	[0 1 1]	"#00FFFF"
"magenta"	"m"	[1 0 1]	"#FF00FF"
"yellow"	"y"	[1 1 0]	"#FFFF00"
"black"	"k"	[0 0 0]	"#000000"
"white"	"w"	[1 1 1]	"#FFFFFF"

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

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	"#0072BD"
[0.8500 0.3250 0.0980]	"#D95319"
[0.9290 0.6940 0.1250]	"#EDB120"
[0.4940 0.1840 0.5560]	"#7E2F8E"
[0.4660 0.6740 0.1880]	"#77AC30"
[0.3010 0.7450 0.9330]	"#4DBEEE"
[0.6350 0.0780 0.1840]	"#A2142F"

Interactivity

Visible — State of visibility

'on' (default) | on/off logical value

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.

Editable — Allow edit field changes

'on' (default) | on/off logical value

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.

Enable — Operational state

'on' (default) | on/off logical value

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 — Tooltip

'' (default) | character vector | cell array of character vectors | string array | 1-D categorical array

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.

ContextMenu — Context menu

empty GraphicsPlaceholder array (default) | ContextMenu object

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

Position — Location and size

[100 100 150 22] (default) | [left bottom width height]

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.

Element	Description
left	Distance from the inner left edge of the parent container to the outer left edge of the date picker
bottom	Distance from the inner bottom edge of the parent container to the outer bottom edge of the date picker
width	Distance between the right and left outer edges of the date picker
height	Distance between the top and bottom outer edges of the date picker

All measurements are in pixel units.

InnerPosition — Location and size

[100 100 150 22] (default) | [left bottom width height]

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.

OuterPosition — Location and size

[100 100 150 22] (default) | [left bottom width height]

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 — Layout options

empty LayoutOptions array (default) | GridLayoutOptions object

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

ValueChangedFcn — Value changed function

'' (default) | function handle | cell array | character vector

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.

Property	Value
Value	New selected date
PreviousValue	Previously selected date
Source	Component 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.

CreateFcn — Creation function

'' (default) | function handle | cell array | character vector

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.

DeleteFcn — Deletion function

'' (default) | function handle | cell array | character vector

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

Interruptible — Callback interruption

'on' (default) | on/off logical value

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.

BusyAction — Callback queuing

'queue' (default) | 'cancel'

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.

BeingDeleted — Deletion status

on/off logical value

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 — Parent container

Figure object (default) | Panel object | Tab object | ButtonGroup object | GridLayout object

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.

HandleVisibility — Visibility of object handle

'on' (default) | 'callback' | 'off'

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 Value	Description
'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

Type — Type of graphics object

'uidatepicker'

This property is read-only.

Type of graphics object, returned as 'uidatepicker'.

Tag — Object identifier

'' (default) | character vector | string scalar

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.

UserData — User data

[] (default) | array

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

focus

Focus UI component

Examples

Display Custom Date Format

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';

Disable Sundays and a Holiday

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.

Create a Callback for Date Selection

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

Version History

Introduced in R2018a

R2021a: Specify placeholder text

Provide a short hint that describes the expected date picker input by using the Placeholder property.