在使用element-ui的DatePicker(日期选择器)时,遇到了怎么获取选定值,以及获取到的值是什么数据类型的问题。
第一个问题,如何获取用户页面选定的日期?很简单,vue是双向绑定的,只要添加v-model属性并为其绑定一个变量即可,向后端传递时,也只需将该变量传递到后端。如图1代码,transdate就是绑定的日期变量。并且,这样得到的日期值的类型是String类型的,后端接收时也要写成相同的格式(包括变量类型和大小写的一致性)。
图1图2,向后端传递参数的写法。
图2第二个问题,日期的格式,一般DatePicker中默认值的格式是类似于图3中的第1种,带有时分秒(value-format="yyyy-MM-dd hh:mm:ss"),有时候我们只需要“年-月-日”,就要设置属性value-format="yyyy-MM-dd",如图4.
图3 图4图4中的@change是当日期发生改变时触发的方法。
以上就是关于日期选择器DatePicker的一些使用心得,详细介绍可以element-ui官方文档http://element-cn.eleme.io/#/zh-CN/component/date-picker。
网友评论