[royale-asjs] branch develop updated: tour-de-jewel: example for DateField with DateFieldDateRangeRestriction bead to limit the possible range of dates that can be selected on the calendar

[ca...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new ab51337  tour-de-jewel: example for DateField with DateFieldDateRangeRestriction bead to limit the possible range of dates that can be selected on the calendar
ab51337 is described below

commit ab51337d43bce0599fb9c95b714929db513c7444
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Dec 31 17:20:23 2020 +0100

    tour-de-jewel: example for DateField with DateFieldDateRangeRestriction bead to limit the possible range of dates that can be selected on the calendar
---
 .../src/main/royale/DateComponentsPlayGround.mxml  | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
index bb1e7da..7087e46 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
@@ -289,6 +289,28 @@ limitations under the License.
 
 			</j:Card>
 		</j:GridCell>
+		
+		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H3 text="DateField Restricted Date Range"/>
+				<j:DateField localId="dateFieldRes">
+					<j:beads>
+						<j:DateFieldDateRangeRestriction minDate="{minDate}" maxDate="{maxDate}"/>
+					</j:beads>
+				</j:DateField>
+
+				<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
+					<j:Label text="Select Min Date"/>
+					<j:DateField change="minDate = event.target.selectedDate;" selectedDate="{minDate}"/>
+				</j:HGroup>
+				
+				<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
+					<j:Label text="Select Max Date"/>
+					<j:DateField change="maxDate = event.target.selectedDate;" selectedDate="{maxDate}"/>
+				</j:HGroup>
+
+			</j:Card>
+		</j:GridCell>
 
 	</j:Grid>