Understanding of My97DatePicker date plugin wdatepicker datefmt and common functions

wdatepicker datefmt

 

Front page:

 

            <tr>

                <tb>Date of Birth:</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>

 

Background entity class:

 

@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"): This is to convert the date type to the form of "yyyy-MM-dd HH:mm:ss";

Pay attention to the front-end sentence dateFmt:'yyyy-MM-dd HH:mm:ss', which is to convert the front-end My97DatePicker plugin to the corresponding format, here is 'yyyy-MM-dd HH:mm:ss', which guarantees The front-end and back-end date formats correspond to each other, and no error will be reported when passing the value;

 

Front-end error format:

             <tr>

                <tb>Date of Birth:</tb>

                <tb><input id="d11" type="text" name="birthday" onFocus="WdatePicker({ isShowClear:false,readOnly:true , onpicked:function(){this.blur();} })" datatype="date"/></tb>

            </tr>

Missing the sentence dateFmt:'yyyy-MM-dd HH:mm:ss', the default conversion format of the My97DatePicker plugin is "yyyy-MM-dd",

As a result, the date formats of the front and back ends do not correspond, and "related parameter format error" will be reported;

 

isShowWeek

 

You can decide whether to limit the week by configuring the isShowWeek property, and when returning the date, you can also return the selected week through the built-in custom events and API functions

<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>

 

Action button customization

The clear button and the today button can be customized as needed. They correspond to isShowClear and isShowToday respectively. The default value is true

  To disable the emptying function:

  It is best to set readOnly to true, otherwise even if the clear button is hidden, the user can still delete the value in the input box

 

custom format

yMdHmswW represent year, month, day, hour, minute, second, week, week, and you can combine these elements arbitrarily to customize your personalized date format.

Get a system-recognized date value:

Dates like July 5, 1999 cannot be recognized by the system, they must be converted to a recognized type such as 1999-07-05 

The real date value for  December 12, 2016  is: 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" />

 

Note: In practical applications, vel is generally designated as a hidden control, here is to display the real value, so use a text box

Key attribute: vel specifies the ID of a control or control, which must have a value attribute (such as input) to store the real value (that is, the formatted value of realDateFmt and realTimeFmt)

 

 

 

 

 

 

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327105403&siteId=291194637