Skip to content

PickerPropertyView

Steve Hannah edited this page Jul 8, 2021 · 2 revisions

PickerPropertyView

<radPicker>, <radStringPicker>, <radDatePicker>, <radDateTimePicker>, <radTimePicker>, <radCalendarPicker>, <radDurationPicker>, <radDurationHoursPicker>, <radDurationMinutesPicker>

String picker

StringPIckerPopup

Date picker

DatePickerPopup

DateTimePickerPopup

TimePicker

TimePickerPopup

DurationPicker

DurationPickerPopup

CalendarPicker

CalendarPickerFieldAndPopup

Synopsis

Binds a Picker component to a view model property.

Usage

The <radPicker> component can either wrap one of the <picker> variant tags, or it can be standalone, in which case it implicitly wraps one of the <picker> variant tags. If it is standalone, then you can set properties of the implicitly-wrapped picker using component.* attributes.

Tip
See the Picker wiki page for examples using the Picker component directly without binding to the view model.

The PickerPropertyView supports multiple flavours corresponding to the flavours in the Picker component.

<radPicker>, <radStringPicker>

A picker to choose from a set of string options.

<radDatePicker>

Select a date.

<radTimePicker>

Select a time.

<radDateTimePicker>

Select a date and time.

<radCalendarPicker>

Select a date using a calendar popup.

<radDurationPicker>

Select a duration in minutes and seconds.

<radDurationHoursPicker>

Select a duration in hours.

<radDurationMinutesPicker>

Selet a duration in minutes.

Attributes

tag

Specifies the property of the view model to bind to.

component.*

Sets properties on the wrapped Picker component.

Example

<?xml version="1.0"?>
<y safeArea="true" scrollableY="true" xsi:noNamespaceSchemaLocation="RADPickerSamples.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <title>RAD Picker Samples</title>

    <define-tag name="favColor"/>
    <define-tag name="birthdate" type="java.util.Date"/>
    <define-tag name="timeField" type="int"/>
    <define-tag name="lastModified" type="java.util.Date"/>
    <!--<define-tag name="durationField" type="long"/>-->

    <spanLabel>This page demonstrates binding pickers to model properties.</spanLabel>
    <spanLabel>For plain pickers see: </spanLabel>
    <button rad-href="#PickerSamples">Picker Samples</button>

    <label>Pick a color</label>
    <radPicker tag="favColor" component.strings="csv:Red, Green, Blue" />

    <label>You selected:</label>
    <radLabel tag="favColor" component.preferredH="2rem"/>

    <label>Select your birthdate</label>
    <radDatePicker tag="birthdate"/>

    <label>Your birthday is:</label>
    <radLabel tag="birthdate" component.preferredH="2rem" dateFormat="TimeAgo"/>


    <label>Timepicker</label>
    <radTimePicker tag="timeField"/>

    <label>Date and Time picker</label>
    <dateTimePicker tag="lastModified"/>

    <label>Calendar Picker</label>
    <radCalendarPicker tag="birthdate"/>



    <!--
    <label>Duration Picker</label>
    <radDurationPicker tag="durationField"/>

    <label>Duration Hours Picker</label>
    <radDurationHoursPicker tag="durationField"/>

    <label>Duration Minutes Picker</label>
    <radDurationMinutesPicker tag="durationField"/>
    -->

</y>
RADPickerSamples
Clone this wiki locally