ASP. NET uses the My97DatePicker date control,

Source: Internet
Author: User

ASP. NET uses the My97DatePicker date control,

First download the control package:

Reference File
  <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
Directory details

Regular call
 <input id="d11" type="text" class="text" onclick="WdatePicker()"  />

Use the position attribute to customize the pop-up position
 <input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:50,top:50}})" />

Year, month, day, hour, minute, and second
<Input type = "text" id = "d241" onfocus = "WdatePicker ({dateFmt: 'yyyy MM dd HH mm min ss s '}) "class =" text "/>

The date range is.
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'blueFresh',minDate:'2006-09-10',maxDate:'2008-12-20'})" />


The date range is 11:30:00 to 20:59:30
  <input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'blue',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" />


You can use the dynamic variables provided by the system, such as % y (current year) and % M (current month) to limit the date range. You can also use {} to perform expression operations, such: {% d + 1}: Indicates tomorrow

Dynamic variable table

Only the date before today can be selected (including today)
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'green',maxDate:'%y-%M-%d'})"/>



Only the first day of the month to the last day of the month can be selected.
   <input id="d423" class="Wdate" type="text" onfocus="WdatePicker({skin:'simple',minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>


You can only select a date from 7:00:00 today to 21:00:00 tomorrow.


<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({skin:'YcloudRed',dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

The preceding date cannot be greater than the following date and neither date can be greater than 2020-10-01


 <input id="d4311" class="Wdate" type="text" onfocus="WdatePicker({skin:'ext',maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})" /> <input id="d4312" class="Wdate" type="text" onfocus="WdatePicker({skin:'ext',minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})" />


The preceding date + 3 days cannot be greater than the following date
<input type="text" class="Wdate" id="d4321" onfocus="WdatePicker({skin:'simple',maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})" /><input type="text" class="Wdate" id="d4322" onfocus="WdatePicker({skin:'simple',minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})" />

Disable the date corresponding to Saturday and Sunday
<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

Disable the 5, 15, and 25 days of each month
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

Note: '5 $ 'indicates the use of $, which ends with 5.

To use the preceding control in. NET, you only need to add a runat = "server" attribute for the control!

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.