DateTimeBox

DateTimeBox

In Brixxbox, you can add date time box control to input date with timestamp. Date time box control is similar to Date Time Box control in Brixxbox, it also allows users to add date's with an addition of time stamp. User can select date and time from calendar view.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Date time box control allows user to add dates plus time. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

  • Control Type

- For using Date Time Box control, "Date Time Box" control type should be selected from drop down list.

  • Control Id

- For each Brixxbox app, this id should be unique. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value but it should be meaningful. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters.

  • Label

- It is the display value for control. For Dates and time control, it makes sense to label them via action that is being performed plus 'time' For example, in an employee information application one date should be arrival time which store date plus time everyday.

  • Data

- This property specifies from where this control gets data. To set it, specify the controlId of data source. By default "Not in Database" option is selected.

  • Refers to Config

- You need to set this option if this is a field, that other fields refer to, to get data from another config.

  • Default Value

- Brixxbox allows users to add a default value for a control. This value will be set as a control's value when an application containing this control is opened or a new record is created. In the background, the brixxApi function "setFieldValue" is called with this value. For Date Time Box Control, we can use "moment()" function. It will assign the current value of date to our control.

Date and Time Box Properties

  • Precision

- This property allows users to select timestamp precision. It has two options: minutes and seconds. By default minutes is selected.

  • Save UTC and show local time

- This is checkbox option. If this Checkbox is selected. The control will display date and time in local time zone of user but the orgnal value behind the control is utc timestamp. Brixxbox "setFieldValue" function will assume you set a utc time and will add the local timezone just for the display. Brixxbox "getFieldValue " function will give you the utc time as well. So users in different timezones will see different values, but in the database there is just the utc time stored.

Size

In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how big it should be according to your application needs. Size properties defines how control will be displayed in Brixxbox App.

  • Label on Top of Control

- If this option is selected then the label of a control and actual control will be in two different horizontal lines . Control's label will be present on the top line and Date time box control itself will be present on bottom line. If this option is not selected then 12 column's will be shared between label and control itself and both of them will be present on same line in side by side formation. For example, label can be 4/12 column's long and control can be 8/12 columns long over same horizontal line.

The display layout is divided into four different categories depending upon the pixels. For each category, Brixxbox allows you to customize the width of control.

  • Phone (and up)

- This category includes devices which have screen pixels less than 768 pixels. For example: Smart phones. This will be by default selected category in Brixxbox. In this category, each control will be assigned to 12/12 by default. It means that in extra small screens, each control takes up the whole horizontal line and next control will take up whole next horizontal line and soon.

  • Tablets (and up)

- This category includes devices which have screen pixels less than 992 pixels. For example: Tablets. By switching this settings on, they will come into play for particular app.

  • Medium Devices (Laptops)

- This category includes devices which have screen pixels less than 1200 pixels. For example: Laptops. In Medium devices, an input control will be set to 4/12 per control by default with option to customize the size of controls.

  • Large Devices (Big Monitors)

- This category includes devices which have screen pixels greater than 1200 pixels. For example: Big monitor displays.

  • Custom Label class

- This is only relevant if the control is in a From Group, and so the Label is left or right of the control instead of above it. It uses the same rules as the Width properties as above.

Styling

These properties defines how control looks like in Brixxbox.

  • Enabled

- It allows two options: yes, no. If "yes" is selected, the control will be enabled. In Date Time Box case, user will be able to select a date and time. On the other hand, if "no" is selected then it will be disabled.

  • Disabled in edit mode

- There are two modes available in Brixxbox for each app: edit mode, create mode. In edit mode: user is allowed to add new controls and functionality while in create mode, on the basis of app controls, user is allowed to add a new record, edit an existing record, or list all the records. In order to edit a record, user has to list all the records using app settings and then select a specific record to edit. "Disabled in edit mode" is a checkbox field. If this option is selected then the control will not be functional while editing a previously saved record but it will be functional while creating a new record.

  • Visibility

- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms.

  • Text Color

- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.

  • Tooltip

- Enter a text for a tool tip. This will be translated.

  • Help Text

- Brixxbox with the property allow users to add some help text. This text will be displayed below the control. The purpose of this option is to encourage the right behavior of customer while using a specific control.

For further information please have a look at Bootstrap Grid System

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Date Time Box". In this app, we have two textboxes "first name", "last name" and a "save" button. "Save" button validates the inputs and save them, when button is pressed. Now we also want to store arrival datetime of employees in our app. To allow this behavior we need to add a "Date Time Box" control.

First of all, select "Date Time Box" from list of controls. After this, you need to give an id to your Date Time Box. Next assign "Arrival Time" label to your control and add "nonEmpty" validator. Now save your application. Your application should look like this:

Now if you always want current date as a value of "Arrival Time" control, we can use "moment()" function as a default value for our control, in general properties. It will assign the current date time to new records and on creating new records, our App will look like this

The value of Arrival Time is "08/31/2021 4:05 PM". It shows the current date and time at which I am writing this tutorial. Date Time Box allows you to add date time in calendar format. For this you need to click on calendar icon. It will display the calendar as shown below

Button on the top left of calendar acts same as "moment()" function. By clicking it one can set current date and time as a control's value. Button on top middle of calendar is used to reset date picker's value. Cross button(X) is used to exit to calendar view. From calendar we can set year, month, day and time easily with mouse clicks without typing date and time.

PreviousDateBoxNextDocViewer

Last updated