awtk-widget-date-picker

日期选择控件。

默认界面比较朴素，请根据应用程序的风格，自己进行调整。

英文界面：

中文界面：

准备

获取 awtk 并编译

git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -

运行

生成示例代码的资源

python scripts/update_res.py all

也可以使用 Designer 打开项目，之后点击 “打包” 按钮进行生成；如果资源发生修改，则需要重新生成资源。

如果 PIL 没有安装，执行上述脚本可能会出现如下错误：

Traceback (most recent call last):
...
ModuleNotFoundError: No module named 'PIL'

请用 pip 安装：

pip install Pillow

编译

编译PC版本

scons

编译LINUX FB版本

scons LINUX_FB=true

完整编译选项请参考编译选项

运行

./bin/demo

如何使用 date_picker 控件

基本用法

date_edit 需要两个特殊名称的子控件，它们的名称和功能如下：

date 用于显示和编辑日期，通常用 edit 控件，并指定 input type 为"date"
pick 用于点击后弹出日期选择控件。通常用 button 控件。点击 pick 按钮后，会打开名为"date_picker"的弹出窗口。

子控件的大小和风格可以自行设定，遵循命名规则即可。

示例：

<date_edit name="d1" x="10" y="10" w="148" h="30" year="2020" month="12" day="31">
  <edit name="date" x="0" y="m" w="100%" h="100%" input_type="date" />
  <button name="pick" style="pick" x="r:2" y="m" w="26" h="26" text="..." />
</date_edit>

完整示例请参考: main.xml

注册日期变化事件：

static ret_t on_date_changed(void* ctx, event_t* e) {
  widget_t* widget = WIDGET(e->target);
  date_edit_t* date_edit = DATE_EDIT(widget);

  log_debug("%d/%d/%d\n", date_edit->year, date_edit->month, date_edit->day);

  return RET_OK;
}

...
  widget_child_on(win, "d1", EVT_VALUE_CHANGED, on_date_changed, NULL);

完整示例请参考: window_main.c

date_edit 控件的属性及作用如下表所示：

属性名	作用
year	年
month	月
day	日

弹出窗口

弹出的日期选择窗口名称为 date_picker，可以根据自己的情况定制（主要是设置控件的显示风格）。

date_picker 中也需要特殊名称的子控件，它们的名称与功能分别是：

prev_year 点击后切换到前一年，通常为 button 控件。
prev_month 点击后切换到前一月，通常为 button 控件。
year_month 显示当前年月的文本，通常为 label 控件。
next_month 点击后切换到后一月，通常为 button 控件。
next_year 点击后切换到后一年，通常为 button 控件。
days 存放"天"的容器控件，需要在容器内放42个按钮作为日期显示，通常为 grid 控件。
today 点击后切换到今天，通常为 button 控件。

其内容如下：

<popup theme="date_picker" w="300" h="300" close_when_click_outside="true">
  <date_picker x="c" y="m" w="280" h="280">
    <row name="title" x="0" y="0" w="100%" h="30">
      <button name="prev_year" x="0" y="m" w="30" h="26" text="<<"/>
      <button name="prev_month" x="35" y="m" w="30" h="26" text="<"/>
      <label name="year_month" x="c" y="m" w="50%" h="100%" text="2020/7"/>
      <button name="next_month" x="r:35" y="m" w="30" h="26" text=">"/>
      <button name="next_year" x="r" y="m" w="30" h="26" text=">>"/>
    </row>

    <row name="week" x="0" y="32" w="100%" h="30" children_layout="default(r=1,c=7,m=2,s=2)">
      <label name="sun" tr_text="Su"/>
      <label name="mon" tr_text="Mo"/>
      <label name="tue" tr_text="Tu"/>
      <label name="wed" tr_text="We"/>
      <label name="thu" tr_text="Th"/>
      <label name="fri" tr_text="Fr"/>
      <label name="sat" tr_text="Sa"/>
    </row>

    <grid name="days" x="0" y="64" w="100%" h="-100" children_layout="default(r=6,c=7,m=2,s=2)">
      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>
      
      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>
      
      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>

      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>

      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>

      <button text="0"/>
      <button text="1"/>
      <button text="2"/>
      <button text="3"/>
      <button text="4"/>
      <button text="5"/>
      <button text="6"/>
    </grid>
    <button name="today" x="c" y="b:2" w="60" h="30" tr_text="Today">
  </date_picker>
</popup>

date_picker 控件的属性及作用如下表所示：

属性名	作用
year	年
month	月
day	日

需要翻译的字符串

请参考 strings.xml

文档

完善自定义控件

zlgopen / awtk-widget-date-picker

awtk-widget-date-picker

准备

运行

如何使用 date_picker 控件

基本用法

弹出窗口

需要翻译的字符串

文档

About

Languages