1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03 1978-02-03

CSS
Hover the classes to see matching element(s) in the example
xfInput matches an Element that represents a XForms input element
xsdDate matches an Element that is bound to a node widht datatype date
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control
xfReadOnly matches a xforms control that is currently readonly
xfReadWrite matches a xforms control that is currently writable
xfRequired matches a xforms control that is currently required
xfOptional matches a xforms control that is currently optional
xfEnabled matches a xforms control that is currently relevant (enabled)
xfDisabled matches a xforms control that is currently disabled (can't be visualized here as the control gets hidden)
xfValid matches a xforms control that is currently valid
xfInvalid matches a xforms control that is currently invalid

# Drop Down Date input control

An input which binds to a Node of type 'date' with an additional apperance "bf:dropdowndate" is rendered as a three piece select1 date control. The value may also be be typed in directly but allowed values for the year can be constrained by a custom appearance attribute. Values exceeding the range will 'jump back' to the lowest or highest allowed value respectively.

## Example

Date with years range from ten years in the past to current year Enter you Date of birth Not valid Date with years range starting from 1970 to current year Enter you Date of birth Not valid Date with years range starting from 1970 to 1980 Enter you Date of birth Not valid Date with years range starting from 1980 to 1970 Enter you Date of birth Not valid Date with years range starting 50 years in the past from current year, ending 50 years in the future from current year Enter you Date of birth Not valid Date with years range starting 50 years in the future from current year, ending 50 years in the past from current year Enter you Date of birth Not valid Date with years range starting 30 years in the future from current year, ending 20 years in the future from current year Date +30:+20:Enter you Date of birth Not valid Date with years range starting 40 years in the past from current year, ending 30 years in the past from current year Enter you Date of birth Not valid
readonly required relevant valid

## XForms Markup

    <xf:group id="main" appearance="full">
        <xf:input id="input1" ref="input1/value[1]" appearance="bf:dropdowndate">
            <xf:label>Date with years range from ten years in the past to current year</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input2" ref="input1/value[2]" appearance="bf:dropdowndate" data-bf-params="date:'1970'">
            <xf:label>Date with years range starting from 1970 to current year</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input3" ref="input1/value[3]" appearance="bf:dropdowndate" data-bf-params="date:'1970:1980'">
            <xf:label>Date with years range starting from 1970 to 1980</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input4" ref="input1/value[4]" appearance="bf:dropdowndate" data-bf-params="date:'1980:1970'">
            <xf:label>Date with years range starting from 1980 to 1970</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input5" ref="input1/value[5]" appearance="bf:dropdowndate" data-bf-params="date:'-50:+50'">
            <xf:label>Date with years range starting 50 years in the past from current year, ending 50 years in the future from current year</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input6" ref="input1/value[6]" appearance="bf:dropdowndate" data-bf-params="date:'+50:-50'">
            <xf:label>Date with years range starting 50 years in the future from current year, ending 50 years in the past from current year</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input7" ref="input1/value[7]" appearance="bf:dropdowndate" data-bf-params="date:'+30:+20'">
            <xf:label>Date with years range starting 30 years in the future from current year, ending 20 years in the future from current year</xf:label>
            <xf:label>Date +30:+20:</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>

        <xf:input id="input8" ref="input1/value[8]" appearance="bf:dropdowndate" data-bf-params="date:'-40:-30'">
            <xf:label>Date with years range starting 40 years in the past from current year, ending 30 years in the past from current year</xf:label>
            <xf:hint>Enter you Date of birth</xf:hint>
            <xf:alert>Not valid</xf:alert>
        </xf:input>
    </xf:group>