表单上日期输入的处理:如何在电脑上和手机上兼容


TopFlow的表单引擎支持了日期、日期时间及时间的选择输入,并支持了在PC和手机上的自动转换,在PC上使用日历控件选择,在手机上自动转换成HTML5的日期元素,使用手机浏览器的内置日期选择器,举个例子: 表单上使用了扩展属性xtype="datetime":

xtype-datetime

则在PC上填写表单时,会使用JS日历控件:

pc-datetimepicker

而在手机上则使用HTML5的日历控件:

html5-datetimepicker

这就是表单引擎在解析表单时,自动判断用户的客户端,并将输入框转换成HTML5模式,在电脑上的表单源码是: 

<input type="text" name="ChuFaShiJian1" formdatatag="Test.ChuFaShiJian1" xtype="datetime" />

如果使用手机,则代码变为: 

<input name="ChuFaShiJian1" formdatatag="Test.ChuFaShiJian1" type="datetime-local" />

 

可以发现在PC上输入框的type是text,而在手机上则变为datetime-local,从而实现了更友好的日期选择方式。

但是,选择日期后我们发现日期格式不一样,在PC上是: 

2015/04/01 12:24

而在手机上则是:

2015-04-01T12:24

日期分隔符不一样,而且日期和时间中间有一个大写的T。 

表单引擎已经可以自动进行判断及处理,但如果自己要通过脚本在表单上操作时间输入框,就要注意PC和手机上的区别了,最好的办法是加一个判断,并使用系统自带的FormatDate方法对日期进行格式化,可以参考以下的代码,判断一下是手机还是PC端:

var format = ($('input[name="ChuFaShiJian1"]').attr("type") == "date" ? "yyyy-MM-DD" : "yyyy/MM/DD");
$('input[name="ChuFaShiJian1"]').val(new Date().FormatDate(format));

var format = ($('input[name="ChuFaShiJian1"]').attr("type") == "datetime-local" ? "yyyy-MM-DDTHH:MI" : "yyyy/MM/DD HH:MI");
$('input[name="ChuFaShiJian1"]').val(new Date().FormatDate(format));

这样就能避免在手机上无法正常显示日期值了。

文章来源:知识库
上一篇 下一篇

评论


请先登录注册后,才能发表评论。