DatePicker Component in MATLAB

MATLAB app builder helps in building apps in GUI without having proper software development knowledge. Matlab helps you create professional apps hassle-free, using it. There are so many components available in Matlab App Builder. You can find them all under the Component Library dialog box. This is situated in the leftmost part of the app builder window. 

DatePicker:

To get started working on DatePicker, drag it from the component library and drop it in the design view. DataPicker component in MATLAB App Building helps users pick data from an interactive calendar. You can display dates in many different formats using this component.

When you select a date picker component the uidatepicker function is get created, which controls the input of date from the user. The function is editable and you set some days off, i.e., which could not be picked and also some dates could be disabled. We will discuss all these in detail, but let’s get started with how to start working on a DatePicker component.

Step 1:Start the Matlab App Builder, by either going to Design Apps,>Apps, or Create App>New>Home. Home and Apps menus are situated on the Menu Bar. 

Step 2: A popup will appear which would ask you to select your preferred layout. Go with a blank layout.

Step 3: Select Date Picker from the Component Library, which is situated on the leftmost part of the screen. Drag it and drop it on the Design View(workspace), of the App.

On importing the date picker following properties, defining the DatePicker would be added to our code.

% Properties that correspond to app components
    properties (Access = public)
        % For creating the app figure
        UIFigure         matlab.ui.Figure
        % For creating the Date Picker
        DatePicker       matlab.ui.control.DatePicker
        % It is pre imported for label for date picker.
        % You can also remove it.
        DatePickerLabel  matlab.ui.control.Label
    end
    

Step 4: After importing it to our app, there would be a list of properties available for DatePicker. You can customize Date Picker’s properties from the Component Browser, which is situated in the rightmost part of the workspace.

Let’s discuss each and every one of them in detail. 

Date Picker properties:

• Value:  It shows the currently selected date.
• Placeholder:  It is the by-default selected date. Whenever you run the app, this date would be visible.
• Limits: It controls the limit of dates to be picked. It comprises lower and upper limits. By default the limits are {0000,1,1) and (9999,12,31).
• Display Format: It defines the format in which the date is to be displayed. The default format is dependent and is the same as the system format. The formats are ‘yyyy-MM-dd’, ‘dd/MM/yy, ‘dd.MM.yyyy’, , ‘MMMM d, yy.
• Displayed Days of Week: You can disable any days of the week for the selected days, i.e., the user won’t be able to select them.
• Displayed Dates: You can disable any particular date.
• Interaction: It controls visibility, editability, enabling date, tooltip(message to be displayed), context menu(to display a context menu on click).
• Position: Position specifies the position of DatePicker on the design view of the app.
• Callback: When you want to show, some message or perform some task when the time and date are selected you can use the callback function. Using this you can control the flow of the function.
• Parent/Child: It handles the visibility of the DatePicker.
• Identifiers: When you are working on a big scale app in MATLAB, then you would require it the most. It helps you add tags to your component so that you can call it later with ease.

Let’s see an example for creating a date picker that selects dates till the 1st Jan 2050 where weekends are disabled. Also, change the color of the picker. For the required output follow these steps.

• Drag and Drop the Date Picker to the Design workspace.
• Go to Component Browser, we will work under it for further steps. Under Date Picker, go-to placeholder and specify today.
• Set Limits, present under Date Picker. We have selected from 01/01/2000 to 01/01/2050.
• Under DiabledDaysOfWeek select Saturday and Sunday.
• Go to Fonts and Colors. Select your desired color as well as the background color.

Example 1:

Matlab

% MATLAB code for DateTimePicker component
classdef date_picker < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure         matlab.ui.Figure
        DatePicker       matlab.ui.control.DatePicker
        DatePickerLabel  matlab.ui.control.Label
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Value changed function: DatePicker
        function DatePickerValueChanged(app, event)
            value = app.DatePicker.Value;

        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create DatePickerLabel
            app.DatePickerLabel = uilabel(app.UIFigure);
            app.DatePickerLabel.HorizontalAlignment = 'right';
            app.DatePickerLabel.Position = [187 253 67 22];
            app.DatePickerLabel.Text = 'Date Picker';

            % Create DatePicker
            app.DatePicker = uidatepicker(app.UIFigure);
            app.DatePicker.Limits = [datetime([2000 1 1]) datetime([2050 1 1])];
            app.DatePicker.DisabledDaysOfWeek = [1 7];
            app.DatePicker.ValueChangedFcn = createCallbackFcn(app, @DatePickerValueChanged, true);
            app.DatePicker.FontColor = [0 0 1];
            app.DatePicker.BackgroundColor = [0 1 1];
            app.DatePicker.Placeholder = 'today';
            app.DatePicker.Position = [269 253 150 22];
            app.DatePicker.Value = datetime([2022 2 24]);

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = date_picker

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Output:

Now take another example and design a date picker that takes the input of only those people who are born before 2000 and after 1950.

Example 2:

Matlab

% MATLAB code for DateTimePicker component
classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                     matlab.ui.Figure
        EnteryourDOBDatePicker       matlab.ui.control.DatePicker
        EnteryourDOBDatePickerLabel  matlab.ui.control.Label
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create EnteryourDOBDatePickerLabel
            app.EnteryourDOBDatePickerLabel = uilabel(app.UIFigure);
            app.EnteryourDOBDatePickerLabel.HorizontalAlignment = 'right';
            app.EnteryourDOBDatePickerLabel.Position = [211 289 90 22];
            app.EnteryourDOBDatePickerLabel.Text = 'Enter your DOB';

            % Create EnteryourDOBDatePicker
            app.EnteryourDOBDatePicker = uidatepicker(app.UIFigure);
            app.EnteryourDOBDatePicker.Limits = [datetime([1050 1 1]) datetime([2000 12 31])];
            app.EnteryourDOBDatePicker.Position = [316 289 150 22];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Output: