TopFlow的表单引擎支持了日期、日期时间及时间的选择输入,并支持了在PC和手机上的自动转换,在PC上使用日历控件选择,在手机上自动转换成HTML5的日期元素,使用手机浏览器的内置日期选择器,举个例子: 表单上使用了扩展属性xtype="datetime":
则在PC上填写表单时,会使用JS日历控件:
而在手机上则使用HTML5的日历控件:
这就是表单引擎在解析表单时,自动判断用户的客户端,并将输入框转换成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));
这样就能避免在手机上无法正常显示日期值了。
请先登录或注册后,才能发表评论。