使用my97datepicker控件实现日期范围选择

注:(2014-12-05内容修改:添加运行效果)

使用my97datepicker 控件,需要对日期的范围进行控制,本人自己写了一个js完成此功能,示例为当前日期到下一周周五之间的日期可选,其他日期不可选,运行效果图如下(自己点,吼吼):

代码如下:

 1 <html xmlns="http://www.w3.org/1999/xhtml">

 2 <head runat="server">

 3 <title></title>

 4 <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>

 5 <link type="text/css" rel="Stylesheet" href="My97DatePicker/skin/WdatePicker.css" />

 6 <script type="text/javascript">

 7     function getNextFriday() {

 8         var myDate = new Date();

 9         var year = myDate.getFullYear(); //得到当前年份

10         var month = myDate.getMonth() + 1; //得到当前月份

11         var day = myDate.getDate(); //得到当前日

12         var weekDay = myDate.getDay(); //得到当前的星期X(0-6代表星期日-星期六)

13         var maxDayOfMonth = new Date(year, month, 0).getDate(); //得到当前月最大日

14  

15         var nextFriday;//距离下周五的天数

16 

17         switch (weekDay) {

18             case 0:

19                 nextFriday = 5;

20                 break;

21             case 1:

22                 nextFriday = 11;

23                 break;

24             case 2:

25                 nextFriday = 10;

26                 break;

27             case 3:

28                 nextFriday = 9;

29                 break;

30             case 4:

31                 nextFriday = 8;

32                 break;

33             case 5:

34                 nextFriday = 7;

35                 break;

36             case 6:

37                 nextFriday = 6;

38                 break;

39             default:

40                 nextFriday = 1;

41                 break;

42         }

43 

44         var dayTotal = day + nextFriday;

45 

46         /**

47           * 1、如果当前日期到下周五所在的日期在当月,即下周五的日期未跨年也为跨月

48           * 2、跨月,且并未跨年

49           * 3、跨年

50          **/

51         if (dayTotal < maxDayOfMonth) {

52             if (month < 10) {

53                 month = "0" + month;

54             }

55             if (dayTotal < 10) {

56                 dayTotal = "0" + dayTotal;

57             }

58             return year + "-" + month + "-" + dayTotal;

59         } else if (month < 12) {

60             month += 1;

61             if (month < 10) {

62                 month = "0" + month;

63             }

64             var nextMonthDay = nextFriday - (maxDayOfMonth - day);

65             if (nextMonthDay < 10) {

66                 nextMonthDay = "0" + nextMonthDay;

67             }

68             return year + "-" + month + "-" + nextMonthDay;

69             } else {

70                 year += 1;

71                 month = "01";

72                 var nextMonthDay = nextFriday - (maxDayOfMonth - day);

73                 if (nextMonthDay < 10) {

74                     nextMonthDay = "0" + nextMonthDay;

75                 }

76                 return year + "-" + month + "-" + nextMonthDay;

77             }

78     }

79 </script>

80 </head>

81 <body>

82     <form id="form1" runat="server">

83         <input id="DateText" type="text" class="Wdate" onclick="var friday=getNextFriday();WdatePicker({minDate:'%y-%M-%d',maxDate:friday})" />

84     </form>

85 </body>

86 </html>

 

你可能感兴趣的:(my97datepicker)