• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Custom > Single Date Picker
Single Date Picker
Custom
  
January 17, 2019
  
Carina Holdaway

The Single Date picker allows the user to select a date. This date can then be sent into a text, or text entry component. The intention is for these text/text entry components to submit the date as part of a form.
The Date Picker can be placed on a separate page to the form, with the ‘Single Date to Text’ action used to send the value into a visible (or invisible) text component in the form.
Alternatively, it could be placed on the same page as a form, and have its visibility toggled using the ‘Toggle Component Visibility’ action. When the form is submitted, it will submit the date stored inside the Date Picker.

Features

  • Customizable colors, icon images, font styles.
  • Date can be saved in different formats
  • Dates positioned in correct days of the week
  • Knows when a leap year is.
  • A month/year selector section to speed up Date Picking (hit the header text)

Sub component overview

The date picker is comprised of several sub components:

This is the header, which displays the current date picker’s month & year. The arrow icons will change it to the previous/next month.
The text is fully customizable with Umajin font styles, the icons can be changed, and the background color can be changed.

This is the days of the week header. It indicates the days of the week for the columns of dates below.

This is the dates mode. It stores all of the dates, correctly placed beneath the corresponding day for that month. It highlights the current date, seen as red in the image above (the month and year must also be same). The selected date has a changeable icon, and its own color. There is one ‘global’ font style used for all dates here, only the colors can be changed for current/selected dates.

This is the month/year selection mode, which can be viewed by clicking on the header. This saves the user from clicking the arrow icons several times to reach a distant date. The arrow icons change which year is selected. These icons are customizable. When the user presses on a month, it will jump into that month in dates mode. The font styles for the months & icons can be changed here. Every other property is shared with the date mode.

Properties for Single Date Picker Component

 

NameWhen components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and SizeSets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to create a component thats size will be maintained across devices.
Header Font StyleThe properties below allow you to set the font style for the header.
Base StyleThe dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown.
Organize Style – opens the Styles Inspector.
Font SizeSet font size using plus and minus buttons.
Font ColorThe color preview shows the color picker. Move around the color pad to select your color you want. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
OpacitySet how opaque the text will display on a scale of 0 to 1, with 0 being totally translucent.
FontThe drop down displays all the fonts you have in your project. Select the font you want to use.
TrackingUse this property to adjust the distance between your text characters.
Days Font StyleThe properties in this section allow you to set the font style for the days of the week header.
Dates Font StyleThe properties in this section allow you to set the font style for the dates.
Months Font StyleThe properties in this section allow you to set the font style for the months in the month selection mode.
Background colorsThe properties in this section allow you to set the background colors for different sub-sections.
Header Background ColorThe color preview shows the color picker. Move around the color pad to select your color you want for the header. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Days Background ColorThe color preview shows the color picker. Move around the color pad to select your color you want for the days of the week background. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Dates Background ColorThe color preview shows the color picker. Move around the color pad to select your color you want for the dates background. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Months Background ColorThe color preview shows the color picker. Move around the color pad to select your color you want for the months background. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Selected DateThe properties in this section allow you to set the properties for the selected date. The selected date uses the font style from Dates Font Style, however it overrides the color property.
Selected Date Font ColorThe color preview shows the color picker. Move around the color pad to select the font color you want for the selected date. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Selected Date ImageSelect an image that will be placed behind the selected date to highlight it. The selected image will attempt to maintain its ratio, however a basic circle or a square shape are recommended.
Selected Date Image ScaleThis property changes the scale of the image component.
Current DateThe properties in this section allow you to set the properties for the current date.
Current Date Font ColorThe color preview shows the color picker. Move around the color pad to select the font color you want for the current date. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
OpacitySet how opaque the text will display on a scale of 0 to 1, with 0 being totally translucent.
Selected MonthThe properties in this section allow you to set the properties for the selected month. The selected month uses the font style from Months Font Style, however it overrides the color property.
Selected Month Font ColorThe color preview shows the color picker. Move around the color pad to select the font color you want for the selected month. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
Selected Month ImageSelect an image that will be placed behind the selected month to highlight it. The selected image will attempt to maintain its ratio, however a basic circle or a square shape are recommended.
Selected Month Image ScaleThis property changes the scale of the image component. The month image scale is slightly different to the dates scale, because the month components are physically larger.
Current MonthThe properties in this section allow you to set the properties for the current month.
Current Month Font ColorThe color preview shows the color picker. Move around the color pad to select the font color you want for the current month. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes.
OpacitySet how opaque the text will display on a scale of 0 to 1, with 0 being totally translucent.
Arrow IconsThe properties in this section allow you to set the properties for the arrow icons.
Arrow Left ImageSelect the image to use as an icon on the left of the header
Arrow Right ImageSelect the image to use as an icon on the right of the header
Arrow Images ScaleThis property changes the scale of the arrow image components.
Arrow Images AlphaSet how opaque the image will display on a scale of 0 to 1, with 0 being totally translucent.
Saved Date FormatThis property sets the format of the date the calendar will use. When submitted via a form, or a date to text action is used, it will save the date in this format.

 

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home