My97 date control my97 datepicker Ver 2.0 official version

3.0.1 official version has been released. For details, click the following URL:
Http://blog.csdn.net/My97/archive/2007/06/27/1668503.aspx

Features and instructions
/*************************************** **************
*Version 2.0 update description(Add * to 2.0 to add features)
* Two call methods are supported *
* Supports Custom Skin and dynamic skin switching (thanks to why for providing whygreen skin )*
* Cross-frame display selection box
* A Date error is prompted automatically.
* Year, set month to select mode *
* Supports editing the date and time. When editing, the system automatically jumps to the corresponding month and time.
* Automatically select the display Location Based on the page size
* Supports time selection *
* Custom Date and Time Format *
* Supports multi-language settings *
* Supports weekend highlight settings *
* Supports encoding settings (such as UTF-8, gb2312, and big5 )*
* Perfect support for Firefox, with the same effect as IE in FF
*---------------------------------------------------
* Fixed the bug where the date cannot be entered through the keypad.
* Fixed the bug where <SELECT> was not covered in IE6.
* Corrected the two July errors in the preview version (thanks to weilf)
*---------------------------------------------------
* Contact my97:
* If you encounter problems during use or have better suggestions
* Welcome to visit
* Blog: http://blog.csdn.net/my97/
* Mail: smallcarrot@163.com
**************************************** ************/

Basic usage:

1. add the JS Library to the file using the date control. The Code is as follows: <script language = "JavaScript" type = "text/JavaScript" src = "datepicker/wdatepicker. JS "> </SCRIPT>

2. Load the CSS style in the file using this date Control <link href = "datepicker/default/datepicker.css" rel = "stylesheet" type = "text/CSS"/>

3. Add (cssclass on. NET) class = "wdate" to the input tag"
Note: This is the style definition of the date box. If you have already defined the style of the date box, you can skip this step.

4. Add the main function onfocus = "New wdatepicker ('El', 'datefmt', 'showstime', 'skin ')"

I believe you already know how to use it. If you still don't understand it, please ask me: 9589876.

Precautions for use in. net
Because. NET is applicable to UTF Encoding by default, it will not be used due to Encoding Problems and will be slightly changed during reference.
<Script language = "JavaScript" type = "text/JavaScript" src = "datepicker/wdatepicker. js"> </SCRIPT>
<Link href = "datepicker/default/datepicker.css" rel = "stylesheet" type = "text/CSS"/>
Changed:
<Script language = "JavaScript" type = "text/JavaScript" src = "datepicker/wdatepicker. js" charset = "gb2312"> </SCRIPT>
<Link href = "datepicker/default/datepicker.css" rel = "stylesheet" type = "text/CSS" charset = "gb2312"/>

Notes for using traditional editions:
Maybe your machine does not have security software in Chinese, you need to change charset = "gb2312" to charset = "GBK". In addition: you need to modify the statement settings in the default settings and change the corresponding Simplified Chinese to traditional Chinese.

Usage and description of the main function
Main call method: onfocus = "New wdatepicker ('El ', 'datefmt', 'showstime', 'skin ')"
This is the main function of the JS Library:
El: the name of the object or object on which the date is returned. Two call methods are provided.
Datefmt: the custom Date Format % Y % m % d % H % m % s indicates the year, month, day, hour, minute, and second (case sensitive). The default value is % Y-% m-% d.
Showstime: Boolean variable true indicates that the default value of time is false.
Skin: Skin name. This pack comes with two skins: Default and whygreen.
For related examples, refer to the above feature demonstration

Changes to the default settings and related instructions
The number of lines at the top of wdatepicker. JS is set by default.
/* Set */
VaR dpcfg = {};
/* Default style if you like the whygreen style, you can change it to whygreen and you can also customize your own style */
Dpcfg. Skin = "default ";
/* Date Format % Y % m % d % H % m % s indicates year, month, day, hour, minute, and second (case sensitive )*/
Dpcfg. datefmt = "% Y-% m-% d ";
/* Whether to display the time */
Dpcfg. Showtime = false;
/* Whether to highlight Saturday and Sunday */
Dpcfg. highlineweekday = true;
/* Language settings */
Dpcfg. aweekstr = ["day", "one", "two", "three", "four", "five", "Six"];
Dpcfg. amonstr = ", "October", "11", "12"];
Dpcfg. todaystr = "today ";
Dpcfg. okstr = "OK ";
Dpcfg. timestr = "time ";
/* Prompt information when an error date is entered */
Dpcfg. dateerrstr = "enter a correct date format! ";

Custom Skin description
Skin can be customized,
1. The skin name is the name of the skin folder.
2. pictures and other resources used by skin must be placed in the skin folder.
3. the CSS file name must be datepicker.css.

Take whygreen skin as an example: Use code to speak

/*
* My97 date control my97 datepicker Ver 2.0
* Skin name: whygreen
* Skin Author: Why
* Author's homepage: www.nbycstudio.com
*/

/* Date Selection control */
. Wdate {
Width: 140px;
Border: #999 1px solid;
Background: URL (../datepicker.gif) No-repeat right;
}

/* Date selection container Div */
. Wdatediv {
Width: 180px;
Background-color: # FFF;
Border: # c5e1e4 1px solid;
Padding: 2px;
}
. Wdatediv * {font-size: 9pt ;}
/****************************
* Year and month
***************************/
/* Year month column Div */
. Wdatediv # dptitle {
Height: 24px;
Border: # c5d9e8 1px solid;
Color: # 70a5ab;
Background: url(bg.jpg );
Margin-bottom: 2px;
}
/* Year month input box */
. Wdatediv. yminput {
Padding-top: 2px;
Text-align: center;
Border: 0px;
Height: 16px;
Color: #034c50;
Background: url(ymbg.jpg );
}
/* Style input when the year month input box obtains focus */
. Wdatediv. yminputfocus {
Text-align: center;
Font-weight: bold;
Color: #034c50;
Border: #939393 1px solid;
Height: 16px;
}
/* Select the year and month box Div */
. Wdatediv. ymsel {
Position: absolute;
Margin-left: 24px;
Top: 23px;
Background-color: # ffffff;
Padding: 2px;
Border: # a3c6c8 1px solid;
Display: none;
}
. Wdatediv. ymsel table TD {
Color: # 11777c;
}
/* Select the style TD in the year and month box */
. Wdatediv. wym {
Cursor: pointer;
Background-color: # FFF;
}
/* The Mouseover style TD in the year and month selection box */
. Wdatediv. wymon {
Cursor: pointer;
Background-color: # Beebee;
}
/****************************
* Weeks and dates
***************************/
/* Date column table */
. Wdatediv # dpdaytable {
Line-Height: 20px;
Color: # 13777e;
Background-color: # edfbfb;
Border: # bee9f0 1px solid;
}
/* Week column tr */
. Wdatediv # dpweektitle {
Color: # 13777e;
Background-color: # bdebee;
}
/* Date Format TD */
. Wdatediv. wday {
Cursor: pointer;
}
/* The Mouseover style Td of the date lattice */
. Wdatediv. wdayon {
Cursor: pointer;
Background-color: #74d2d9;
}
/* Weekend date format TD */
. Wdatediv. wwday {
Cursor: pointer;
Color: # ab1e1e;
}
/* The Mouseover style Td of the weekend date lattice */
. Wdatediv. wwdayon {
Cursor: pointer;
Background-color: #74d2d9;
}
/****************************
* Time-related
***************************/
/* Time bar Div */
. Wdatediv # dptime {

}
/* Time text span */
. Wdatediv # dptime # dptimestr {
Margin-left: 1px;
Color: # 497f7f;
}
/* Time input box input */
. Wdatediv # dptime input {
Height: 16px;
Width: 18px;
Text-align: center;
Color: #333;
Border: #61cad0 1px solid;
}
/* Input at time */
. Wdatediv # dptime. TB {
Border-Right: 0px;
}
/* Time and interval ': 'input */
. Wdatediv # dptime. Te {
Border-left: 0;
Border-Right: 0;
}
/* Time second input */
. Wdatediv # dptime. tm {
Width: 7px;
Border-left: 0;
Border-Right: 0;
}
/* The up button on the right of the time */
. Wdatediv # dptime # dptimeup {
Height: 10px;
Width: 13px;
Border: 0px;
Background-image: url(up.jpg );
}
/* The down button on the right of the time */
. Wdatediv # dptime # dptimedown {
Height: 10px;
Width: 13px;
Border: 0px;
Background-image: url(down.jpg );
}
/****************************
* Others
***************************/
/* Click "OK" and "input" in a few days */
. Wdatediv # dpokinput {
Border: #38b1b9 1px solid;
Height: 16px;
Background-color: # cfebee;
Color: # 08575b;
}

 

Before downloading the post I posted on csdn, thank you very much!
Http://community.csdn.net/Expert/topic/5283/5283758.xml? Temp =. 8240473.

Demo address: http://www.waytop.net/my97/datepicker/2.0/demo2.0.html
: Http://www.waytop.net/my97/datepicker/My97DatePicker2.0.rar

Contact my97:

**************************************** ************
* If you encounter problems during use or have better suggestions
* Welcome to visit
* Blog: http://blog.csdn.net/my97/
* Mail: smallcarrot@163.com
**************************************** ************/