关于My97DatePicker日期插件wdatepicker datefmt及惯用功能的理解
wdatepicker datefmt
前端页面:
<tr>
<tb>出生日期:</tb>
<tb><input id="d11" type="text" name="birthday" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss' , isShowClear:false,readOnly:true , onpicked:function(){this.blur();} })" datatype="date"/></tb>
</tr>
后台实体类:
@Entity
@Table(name="teacher")
@Setter
@Getter
public class Teacher extends JPABaseEntity {
@Column(name="uname")
private String uname ;
@Column(name="phonnumber")
private String phonNumber ;
@Column(name="password")
private String password ;
@Column(name="email")
private String email ;
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
@Temporal(TemporalType.DATE)
@Column(name="birthday")
private Date birthday ;
}
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss"):这是将日期类型转换为"yyyy-MM-dd HH:mm:ss"这种形式;
注意前端这句话dateFmt:'yyyy-MM-dd HH:mm:ss',这是将前端My97DatePicker插件转换为相应格式,此处为'yyyy-MM-dd HH:mm:ss',这样保证了前后端日期格式相对应,传值不会报错;
前端错误格式:
<tr>
<tb>出生日期:</tb>
<tb><input id="d11" type="text" name="birthday" onFocus="WdatePicker({ isShowClear:false,readOnly:true , onpicked:function(){this.blur();} })" datatype="date"/></tb>
</tr>
缺少了dateFmt:'yyyy-MM-dd HH:mm:ss'这句话,My97DatePicker插件的默认转换格式为“yyyy-MM-dd ”,
导致前后端日期格式不对应,会报出“相关参数格式错误”;
isShowWeek
可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周
<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>
操作按钮自定义
清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true
禁用清空功能:
最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉
自定义格式
yMdHmswW分别代表年月日时分秒星期周,可以任意组合这些元素来自定义你个性化的日期格式.
取得系统可识别的日期值:
类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05
2016年12月12日 真实的日期值是: 2016-12-12
<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<input id="d244_2" type="text" />
注意:在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框
关键属性: vel 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)