How Do I Create an iOS Date Picker in a column?

This Lesson presents how to create a column containing an iOS Date Picker control in a datagrid, using the Data Grid Helper Plugin.

Opening Columns Builder

Opening Columns Builder

First, drag a datagrid onto a stack and double click on it to open the Data Grid Helper (DGH) Properties Palette.

Click the "Edit..." button to open Columns Builder.

Building Columns in the Columns Builder Preview

Building Columns in the Columns Builder Preview

Click the (+) button and add two columns.

Name the last column "DatePicker".

Date Picker Creation Using Custom Objects and Column Content

Date Picker Creation Using Custom Objects and Column Content

Open the Custom Objects, Columns Builder Properties topic (1)

Double click on the "Pickwheel" header (2)  to open the Column Content (3)

Next, drag the iOS Modal Date Picker image from the Column Builder Properties and drop it in the Column Content Area (4)

Update Columns Builder Preview

Update Columns Builder Preview

Click the Update button to refresh the Column Builder Preview content (1).

A field named "_ColumnData_" will also be automatically added in the Column Content.

Remove this field by selecting it's name in the Object List of the Column Content Area (2), after the field is selected in the Column Content, on your keyboard, press the Delete or Suppr key.

Editing The Date Picker Field

Editing The Date Picker Field

Double clicking on the Date Picker field in the Column Content, will open the Properties Inspector.

Enter a name for this date picker field. Default name is "new iOS Date Picker Field". Example: myFirstDatePicker

Close the inspector, then update the columns builder preview again by clicking on the update button.

Using DGH To Build The Required Script

Using DGH To Build The Required Script

DGH can now  build the required script for managing this iOS Date Picker according to the column data.

Click the Script Editor icon and select the "Build Script" menu.

Confirm Script Updating

Confirm Script Updating

Click the "Update" button to update the script of the column.

Confirming the warning message

Confirming the warning message

Click the "Erase" button to replace the column default script with the script built by DGH.

Editing The Date Picker type in the DatePicker's column script

Editing The Date Picker type in the DatePicker's column script

Click the Script Editor icon and select the "Edit Script" menu.

Default type for displaying the Date Picker type is added by DGH in the EditValue handler. The default type is "Date"

In the EditValue handler, locate this line:

put "date" into tTheDatePickerType ## Change the date picker type here

According to the iOS documentation, the date picker type can be one of the following:

  • date
  • time
  • dateTime

Once the date picker type changed, apply the script's change by clicking on the Apply button of the Script Editor.

Update Column Content Then Apply The Column Builder Preview To The DataGrid

Update Column Content Then Apply The Column Builder Preview To The DataGrid

After the script is built, update the DataGrid Preview, by clicking the "Update" button.

Then, click on the "Apply" button to apply the modifications to the selected DataGrid (1).

Adding some data to the datagrid

Adding some data to the datagrid

Before to test the result in the Simulator, add some data in the Col1 column by using the "Contents" topic of the LiveCode's Property Inspector.

Separate data of each line by a return, then press enter to update the Datagrid's content.

Changing the Data Grid Appareance by Applying the iOS Preset

Changing the Data Grid Appareance by Applying the iOS Preset

In the DGH's "Table properties", click on the DataGrid Preset's Apply button to change the datagrid appareance.

Testing The Result in the Simulator

Testing The Result in the Simulator

To test the result, open the Simulator and click on the Date Picker column's content, then select a value in the Picker.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.