1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html日期选择框_第十课 日期选择框(datepicker)的操作

html日期选择框_第十课 日期选择框(datepicker)的操作

时间:2023-09-01 10:27:44

相关推荐

html日期选择框_第十课  日期选择框(datepicker)的操作

有客户问:datepicker是怎么操作的?

我答:datepicker可以直接用"输入文本"组件。

客户说:不是,现在我操作的这个网页上datepicker是不能直接输入的,否则就直接用“输入文本”组件搞定,很简单的。

没错,datepicker也是我们在项目中经常用到的,处理方式不能一概而论,跟客户说的一样,需要具体问题具体分析,有些网页或者桌面程序的日期是支持直接输入,这种情况下我们就用“输入文本”组件,另外一种情况是不支持直接输入,必须得点击才能选择到。如果需要输入的年月日固定,也好点击操作,但是年月日不固定又该如何操作呢?

接下来,我们一起看看具体操作。

准备工作

1)准备开发流程的电脑,请打开云扩学院链接查看云扩RPA编辑器运行的硬件&软件要求(/zh-cn/wiki/Studio/HarewareAndSoftwareRequirements.md?uuid=1bb922bd-c25d-4921-9241-f13ee45d295f)

2)打开云扩官网(/)下载编辑器并安装。

本次课程介绍:

1)流程名称:日期选择机器人,该机器人可以在不固定年月日的情况下从datepicker中正确选择到我们想要选择的日期。

我们以此网站为例:https://ant.design/components/date-picker-cn/

2)流程开发设计如下:

3)流程开发步骤:

打开云扩编辑器,选择“项目”,并点击“新建项目”进行创建项目。

a)“获取系统年月日”部分

打开MainFlow窗口,拖入“流程图”组件,重命名为“获取年月日”:

双击打开流程图,拖入“赋值”组件,设置变量“年”(String)与参数“年份增量”,获取当前系统年份并将该值赋给变量“年”,同时添加用户可自定义的当前年份前几年或后几年数据入口,代码为:

年份:System.DateTime.Now.AddYears(年份增量).ToString("yyyy")

同样方法拖入“赋值”组件并赋值当前系统月份及日期。注意:添加变量“月”、“日”及参数“月份增量”、“日期增量”,如下图所示,获取月份、日期代码为:

月份:System.DateTime.Now.AddMonths(月份增量).ToString("MM").TrimStart('0')

(用TrimStart()方法是为了删掉月份前面的“0”,比如“01”月,因为我们后续流程中只需要“1”,不需要“01”。如果流程中需要01,那么可以把TrimStart()方法去掉,可视具体情况而定)

日期:System.DateTime.Now.AddDays(日期增量).ToString("dd")

C#获取年月日方法很多,如果想要获取当前日期前一日,则用AddDays(-1),举例如下:

今天DateTime.Now.Date.ToShortDateString();昨天,就是今天的日期减一

DateTime.Now.AddDays(-1).ToShortDateString();明天,今天的日期加一

DateTime.Now.AddDays(1).ToShortDateString();

月份年份同理

b)“点击日期选择框”部分

拖入“点击”组件,指定日期输入框元素(点击日期选项框元素打开日期选项框):

c)“选择年份”部分

拖入“点击”组件,指定年份title元素(点击年份title打开年份选项框):

拖入“获取结构化数据”组件,指定年份table元素(获取该面板所有年份以查看用户预期年份是否包含在内,如果不存在,则点击上一页或者下一页按钮翻页):

拖入“C#”组件,从上步获取的数据表中循环查找预期年份,如果有,则赋值isTrue为true,为下一步做准备:

附上查找年份代码段:

isTrue=false;for(inti=0;ifor(intj=0;jif(dt.Rows[i][j].Equals(年)){

i=i+1;

j=j+1;

isTrue=true;break;

}else{continue;

}

}

}

拖入“流程决策”组件,输入判断条件isTrue:

如果isTrue为真(上步中查询到预期年份),则直接点击选中年份,如果未查到年份,则点击翻页。拖入“点击”组件,并分别指定对应元素与对应操作连接,如下图所示:

注意:如果需求中选择的年份并不会超越年份面板,那么判断年份是否存在部分完全可以省略,以此来节省流程开发与运行时间,那么,这种情况下,年份部分的流程如下图所示:

d)“选择月份”部分

拖入“赋值”组件,拼接月份,如下图所示:

拖入“点击”组件,并指定月份title元素(打开月份面板):

拖入“点击”组件,指定预期月份元素(点击指定预期月份):

e)“选择日期”部分

拖入“点击”组件,指定预期日期元素(点击选择日期):

至此,所有操作步骤已开发完毕,保存流程,并进行运行查看,但在实际项目中,请别忘记第四课讲到的“错误捕获(Try catch)”组件的使用,以此来保证流程的稳定性。以下为流程运行视频:

好啦,小伙伴们,今天的课就到此结束,流程开发过程中若遇到问题,请留言;若有其他开发思路,也请留言,祝各位开发顺利~

(本节课开发的流程可从流程市场中下载)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。