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

Source: Internet
Author: User


Two. Features and examples 2. Featured Features
  1. 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>
    Wdatepicker ({econt:' Div1 ', Onpicked:function (DP) {alert (' The date you selected is: ' ()}})

    $DP. CAL.GETDATESTR usage See built-in functions and properties

  2. 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>


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

  3. 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}) "/>

  4. 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).

    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"/>

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: