Home » Working with widgets » Working with Date Pickers

About Date Pickers

Adding a new Date Picker

Renaming a Date Picker

Changing the position of a Date Picker

Changing the width of a Date Picker

Displaying a Date Picker as a form

Moving a Date Picker Forward or Backward

Centering a Date Picker

Deleting a Date Picker

About Date Pickers:

A Date Picker displays a date that can edited. Date Pickers can be displayed as a form

Adding a new Date Picker:

Choose Widget > Insert Text Box > Date Picker. If the current Edit Mode is Edit Background Layer, then the Date Picker will be added to the Background. Otherwise, it will be added to the current card.

Alternately, you can type ^⌘Y.

A Date Picker can also be added using the Widgets pull-down menu in the toolbar.
Widgets Pull Down

Renaming a Date Picker:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “General” section of the Info sidebar, type the new name of the Date Picker into the Name field.
    Rename

Changing the position of a Date Picker:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click and drag the Date Picker to the desired destination.

    Alternately, the location can altered using the Date Picker’s “Metrics” section of the Info side bar.

Changing the width of a Date Picker:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. Click and drag one the anchors in the desired direction.
    Anchors

    Alternately, the width can altered using the Date Picker’s “Metrics” section of the Info sidebar.

    Please note that the height of a Date Picker cannot be altered.

Displaying a Date Picker as a form:

Display as Form Explanation

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. Click the “Widget” button on top right of the Info sidebar.
    Widgets Button
  4. In the “Appearance” section of the Info sidebar, click the “Display as form” check box if it is not already checked.
    Display as Form

Moving a Date Picker Forward or Backward:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. To move a Date Picker one position at a time, choose Widget > Bring Forward or Send Backward.

    To move a Date Picker in front of all other widgets in a card or the background, choose Widget > Bring to Front.

    To move a Date Picker behind all other widgets in a card or the background, choose Widget > Send to Back.

Centering a Date Picker:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. To center a Date Picker horizontally, choose Widget > Center Horizontally in Card or Center Horizontally in Background.

    To center a Date Picker vertically, choose Widget > Center Vertically in Card or Center Vertically in Background.

Deleting a Date Picker:

  1. If the Date Picker is located in the Background, then change the Edit Mode to Edit Background Layer. Otherwise, change the Edit Mode to Edit Card Layer. (See Changing the Edit Mode of a stack for more information regarding Edit Modes.)
  2. Click on the Date Picker.
  3. Press the Delete key.