在移动应用开发中，表单控件的使用非常普遍，它们是用户与应用交互的重要方式之一。本章将介绍日期和时间表单控件的设计与实现。这些控件允许用户输入日期和时间信息，并且可以设置各种限制条件，以确保输入数据的有效性和准确性。
日期和时间表单控件通常用于收集用户的日期和时间信息。这些控件可以设计成只接受特定日期范围内的输入，或者只接受不早于当前日期的输入。下面是一个日期表单控件的示例，它要求用户选择的日期不能早于当天。
{
"mainScreen": {
"screenID": "Date 1",
"screenDisplayArray": [
{
"localeCode": "zh-CN",
"screenLabel": "1. 请选择一个日期",
"screenHint": "选择的日期不能早于今天。"
}
],
"screenwidgetType": "date",
"inputRequired": true,
"widgetSchema": "
\"Date 1\": {
\"type\": \"object\",
\"properties\": {
\"dateYear\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 9999
},
\"dateMonth\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 12
},
\"dateDay\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 31
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": true
}
},
\"required\": [\"dateYear\", \"dateMonth\", \"dateDay\"],
\"minProperties\": 3,
\"maxProperties\": 3,
\"additionalProperties\": false
}",
"dateOption": {
"gtEqToday": true
}
}
}
在这个示例中，定义了一个名为 "Date 1" 的日期表单控件。它要求用户输入年、月、日三个字段，并且设置了一个条件，即用户选择的日期不能早于当前日期。
时间表单控件则允许用户选择小时和分钟值。下面是一个时间表单控件的示例，它允许用户自由选择时间，但默认情况下，用户选择的时间会被转换为协调世界时（UTC）并保存。
{
"mainScreen": {
"screenID": "Time 1",
"screenDisplayArray": [
{
"localeCode": "zh-CN",
"screenLabel": "2. 请选择一个时间",
"screenHint": ":"
}
],
"screenwidgetType": "time",
"inputRequired": true,
"widgetSchema": "
\"Time 1\": {
\"type\": \"object\",
\"properties\": {
\"timeHour\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 23
},
\"timeMinutes\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"timeSeconds\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": true
}
},
\"required\": [\"timeHour\", \"timeMinutes\"],
\"minProperties\": 2,
"maxProperties": 3,
"additionalProperties": false
}"
}
}
在这个时间表单控件的示例中，定义了一个名为 "Time 1" 的时间表单控件。它允许用户输入小时和分钟，并且可以选择是否将时间转换为UTC时间保存。
除了可以设置日期和时间的最小值和最大值之外，还可以设置特定的日期和时间范围。例如，可以限制用户只能选择某个特定月份的日期，或者只能选择某个时间段内的时间。
以下是一个日期表单控件的示例，它限制用户只能选择2016年6月的日期。
{
"mainScreen": {
"screenID": "Date 2",
"screenDisplayArray": [
{
"localeCode": "zh-CN",
"screenLabel": "3. 请选择2016年6月的日期",
"screenHint": "选择的日期必须在2016年6月。"
}
],
"screenwidgetType": "date",
"inputRequired": true,
"widgetSchema": "
\"Date 2\": {
\"type\": \"object\",
\"properties\": {
\"dateYear\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 9999
},
\"dateMonth\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 12
},
\"dateDay\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 31
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": false
}
},
\"required\": [\"dateYear\", \"dateMonth\", \"dateDay\"],
\"minProperties\": 3,
\"maxProperties\": 3,
\"additionalProperties\": false
}",
"dateOption": {
"minDate": {
"dateYear": 2016,
"dateMonth": 6,
"dateDay": 1
},
"maxDate": {
"dateYear": 2016,
"dateMonth": 6,
"dateDay": 30
},
"gtEqToday": false
}
}
}
在这个示例中，定义了一个名为 "Date 2" 的日期表单控件，并限制用户只能选择2016年6月的日期。
同样地，也可以为时间表单控件设置时间范围。以下是一个时间表单控件的示例，它限制用户只能选择下午12点到2点之间的时间。
{
"mainScreen": {
"screenID": "Time 2",
"screenDisplayArray": [
{
"localeCode": "zh-CN",
"screenLabel": "4. 请选择午餐开始的时间",
"screenHint": "选择的时间应在12点到2点之间。"
}
],
"screenwidgetType": "time",
"inputRequired": true,
"widgetSchema": "
\"Time 2\": {
\"type\": \"object\",
\"properties\": {
\"timeHour\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 23
},
\"timeMinutes\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"timeSeconds\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": false
}
},
\"required\": [\"timeHour\", \"timeMinutes\"],
\"minProperties\": 2,
"maxProperties": 3,
"additionalProperties": false
}",
"timeOption": {
"minTime": {
"timeHour": 12,
"timeMinutes": 0,
"timeSeconds": 0
},
"maxTime": {
"timeHour": 14,
"timeMinutes": 0,
"timeSeconds": 0
}
}
}
}
在这个示例中，定义了一个名为 "Time 2" 的时间表单控件，并限制用户只能选择下午12点到2点之间的时间。
本文的最后一章，即第8章，将介绍一些不特定于任何单一屏幕类型的功能。
有兴趣的读者可以跟随这些指南中的表单设计部分，并使用这个GUI工具来学习更多关于基于多种用例场景设计表单的知识。