My97datepicker the flat display of the calendar, not the text box after the Click event is displayed

Two. Features and examples 2. Featured Features

2. Flat display

   The date control supports the flat display function, as long as set the Econt property can be used as a day, without triggering conditions, directly displayed on the page

   
   Example 2-1 Flat Display Demo

   <div id= "div1" ></div>
   <script>
   Wdatepicker ({econt:' Div1 ', Onpicked:function (DP) {alert (' The date you selected is: ' +dp.cal.getdatestr ()}})
   </script>
   
   $DP. CAL.GETDATESTR usage See built-in functions and properties

4. Supports multiple containers

   In addition to returning values to input, you can also return values to other elements (such as: Textarea,div,span) by configuring the El property, and HTML elements with the innerHTML attribute

   Example 2-2 returning a date to <span>

   2008-01-01
   
   Code:
   <span id= "demospan" >2008-01-01</span>
   el:' Demospan '})" src= ". /.. /my97datepicker/skin/datepicker.gif "width=" "height=" "align=" Absmiddle "style=" Cursor:pointer "/>"

5. Start Date Feature
   Note: Date formats must be consistent with REALDATEFMT and realtimefmt instead of DATEFMT

   Sometimes you need to select dates such as birthdays in your project, and the default point start date is the current date, causing the year selection to be cumbersome, and you can easily solve such problems with the start Date feature plus the Configure Alwaysusestartdate property.

   Example 2-3-1 start date simple application

   The default starting date is 1980-05-01
   When the date box is null, 1980-05-01 is used as the start date
   
   
   <input type= "text" id= "d221" onfocus= "Wdatepicker ({startdate:' 1980-05-01 '})"/>

   Example 2-3-2 alwaysusestartdate Property Application

   The default starting date is 1980-05-01
   always use 1980-05-01 as the start date when the date box is no matter what the value
   
   
   <input type= "text" id= "d222" onfocus= "Wdatepicker ({startdate:' 1980-05-01 ',alwaysusestartdate: true}) "/>

   Example 2-3-3 using built-in parameters

   In addition to using static date values, you can also use dynamic parameters (such as:%y,%m, respectively, when the year before and the month)
   
   The following example shows that the month and month date use the 1st of the current year, hours and minutes of 00:00:00 as the starting time
   
   
   <input type= "text" id= "d233" onfocus= "Wdatepicker ({startdate:'%y-%m-01 00:00:00 ', datefmt: ' Yyyy-mm-dd HH: Mm:ss ',alwaysusestartdate:true}) "/>

6. Custom formats

   YMDHMSWW, respectively, represent the day of the month and the week, and you can combine these elements to customize the date format you personalize.

   
   Date format table

   format	Description
   Y	Represents the year as a maximum of two digits. If the year is more than two digits, only the two-digit low number is shown in the result.
   Yy	Ibid., if less than two digits, front 0.
   yyy	Represents the year as a three-digit number. If the number is less than three digits, the front complements 0.
   yyyy	Represents the year as a four-digit number. If the number is less than four digits, the front complements 0.
   M	Represent the month as a number from 1 to 12
   Mm	Ibid., if less than two digits, front 0.
   MMM	Returns the abbreviation of the month from January to December (the English state of Jan to Dec).
   MMMM	Returns the full name of the month from January to December (in English January to December).
   D	Represents the month date as a number from 1 to 31.
   Dd	Ibid., if less than two digits, front 0.
   H	Represents the hour as a number from 0 to 23.
   HH	Ibid., if less than two digits, front 0.
   M	The minute is expressed as a number from 0 to 59.
   Mm	Ibid., if less than two digits, front 0.
   S	Represents the second as a number from 0 to 59.
   Ss	Ibid., if less than two digits, front 0.
   W	Returns the number of weeks corresponding to 0 (Sunday)-6 (Saturday).
   D	Returns the abbreviated one to six days of the week (Sun to Sat in the English state).
   Dd	Returns the full name of the week from Monday to Saturday (in English Sunday to Saturday).
   W	Returns the number of weeks corresponding to (1-53).
   Ww	Ibid., if less than two digits, front 0 (01-53).

   
   Example
   

   format string	value
   YYYY-MM-DD HH:mm:ss	2008-03-12 19:20:00
   YY Year m month	March 08
   YyyyMMdd	20080312
   Today is: yyyy m year d hh mm min	Today is: March 12, 2008 19:20
   H:m:s	19:20:0
   Y years	8 years
   MMMM D, yyyy	March 12, 2008

   Example 2-4-1: DD/DD

   
   <input type= "text" id= "d241" onfocus= "Wdatepicker ({datefmt:' yyyy year mm month DD day hh" mm min ss sec '}) "class=" wdate "style = "width:300px"/>
   
   Note: Click two times to select the reason for the date, see Autopickdate property

   Example 2-4-2 hours and seconds

   
   <input type= "text" id= "d242" onfocus= "Wdatepicker ({skin: ' Whygreen ',datefmt:' H:mm:ss '})" class= "Wdate"/ >
   
   Note: The skin properties are used in advance, so you will see a different skin, skin properties are described in customizing and dynamically switching skins

   Example 2-4-3 Month

   
   <input type= "text" id= "d243" onfocus= "Wdatepicker ({skin: ' Whygreen ',datefmt:' yyyy year mm Month '})" class= "Wdate"/ >

   Example 2-4-4 getting a date value that is recognized by the system(important)

   A date similar to July 5, 1999 is not recognized by the system and must be converted to an identifiable type such as 1999-07-05
   
   The true date value is:
   <input id= "d244" type= "text" class= "wdate" onfocus= "Wdatepicker ({datefmt:' yyyy year m ' D Day ',vel:' d244_ 2 '}) "/>
   <input id= "d244_2" type= "text"/>
   
   Note: In practice, Vel is typically specified as a hidden control, which is used to show the real value, so use a text box
   key attribute: vel specifies the ID of a control or control that must have a value property (such as input) to store the real values (that is, the values that are formatted with REALDATEFMT and REALTIMEFMT)

   Example 2-4-5 week, Month day, year(4.6 new)

   
   <input type= "text" id= "d245" onfocus= "Wdatepicker ({datefmt:' DD, MMMM D, yyyy '})" class= " wdate"/>

8. Bi-monthly calendar feature (4.6 new)

   Can pop up a two month calendar at the same time

   Example 2-5 two-month calendar feature

   
   <input class= "Wdate" type= "text" onfocus= "Wdatepicker ({Doublecalendar:true,datefmt: ' Yyyy-mm-dd '})"/ >
   
   Note: The two-month calendar is typically used only for scenes containing three elements of month and year, and Autopickdate is automatically set to true when setting this property

9. Automatic error correction function

   Error correction processing can be set to 3 modes: prompt (default) automatic error correction flag, when the value in the date box does not conform to the format, the system will try to repair automatically, if the repair failure will be based on your set of error-correcting processing mode for processing, bad judgment function is very intelligent it can guarantee that the user entered a value is a valid value

   Example 2-6-1 Illegal Date demo

   Please enter an illegal date (for example: 1997-02-29) in the date box below and try to leave the focus
   Use default fault tolerance mode hint mode errdealmode = 0 When you enter an incorrect date, you are prompted first
   
   
   Note: 1997 is not a leap year oh

   Example 2-6-2 date beyond the date limit is also considered an illegal date

   The maximum date is 2000-01-10, and if the date entered in the following box is greater than 2000-01-10 (as in 2000-01-12) it will also be considered an illegal date
   Automatic error correction mode Errdealmode = 1 automatically recovers the correct previous value when an incorrect date is entered
   

   Example 2-6-3 dates that use invalid days and invalid date feature limits are also considered to be an illegal date

   Such as:
   2008-02-20 Invalid date limit
   2008-02-02 2008-02-09 2008-02-16 2008-02-23 Invalid day limit
   It's all invalid dates.
   You can try entering these dates in the box below and leaving the focus
   
   Mark Mode Errdealmode = 2 when the wrong date is entered, no hints and changes are made, only a marker is made, but the date box is not immediately hidden
   
   
   Note: The tag class: Wdatefmterr is defined in the skin directory under Wdatepicker.css

11. Display across an infinite-level frame

    No matter where you put the date control, you don't have to worry about being obscured by the outer iframe to affect the customer experience, because the My97 date control can be displayed across an infinite frame

    Example 2-7 demonstration across an infinite-level framework

    Unlimited cross-frame iframe, no matter how nested frame no need to worry about, even if there is scroll bar is not afraid
    Note: JavaScript cannot span frameset, but the My97 date control can span the frame iframe infinitely, and any frameset can use an IFRAME instead

13. Annual calendar of the Republic of China and other special calendars

    The year calendar and other special calendars can be achieved by using the Year Difference attribute Yearoffset (the default of 1911 Republic of China) when the current format is set to YYY format.

    Example 2-8 Republic of the year demo

    
    <input type= "text" id= "D28" onclick= "Wdatepicker ({datefmt:' yyy/mm/dd '})"/>
    
    Note: When the year format is set to YYY, the true date will be subtracted by a difference of Yearoffset (the default is: 1911), if the year of the Republic uses the default value can not be configured separately, if it is the other difference, can be configured in the form of parameters

15. Editing features

    When there is a value in the Date box, when you finish modifying a property, you can edit the time and date by clicking on the button.

    Example 2-9 edit demo for day and Time

    You can try to change the month in the box below to 1 and then click Update, and you'll find the date changed from 2000-02-29 01:00:00 to 2000-01-29 01:00:00
    

17. Convenient for programming

    If the value of El is this, it can be omitted, that is, all el:this can not be written
    When the date box is set to Disabled, the date is not changed (the selection box does not pop up)
    If no onpicked event is defined, the onchange event of the text box is automatically triggered
    If no oncleared event is defined, the OnChange event is automatically triggered when emptied

19. Other properties

    Set the ReadOnly property to specify whether the date box is read-only
    Set the Highlineweekday property to specify whether to highlight weekends
    Set the Isshowothers property to specify whether to show dates for other months
    Plus class= "Wdate" will appear on the right of the selection box date icon

3. Multilingual and custom Skins 4. The date range is limited to 5. Custom Event 6. Quick Select function Three. Configuration instructions four. How to use

My97datepicker the flat display of the calendar, not the text box after the Click event is displayed