[jQuery筆記] 好用的日期函式 datepicker

最新推荐文章于 2020-04-30 16:33:55 发布

qingsf

最新推荐文章于 2020-04-30 16:33:55 发布

阅读量130

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript UI Ajax CSS ViewUI

本文链接：https://blog.csdn.net/qsfwy/article/details/83290137

版权

JQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[jQuery筆記] 好用的日期函式 datepicker

Apr 30th, 2008 by appleboy 參觀者：2,088Views 機器人：388Views
<script></script>

最近在学习 javascript，当然首推的就是 jQuery 了，之前因為懒得做日期表单，因為日期表单需要三种栏位，一个是年，一个是月，一个是日，相当麻烦，一直在那边 for 迴圈也不是办法，虽然那是个解决方法，然后我之前用了xt:Commerce 这套 opensource的程式码，把日期函式取出来：[Html] javascript 好用的时间日历表，不过我认為这方法也太麻烦，因為 jQuery 一行就可以解决的事情，干麼还要用那个方法呢？

再来呢介绍一下怎麼使用日期函式
步骤一：加上 jQuery 套件到 head 跟 /head 之间

 
      <script type="text/javascript" src="jquery.js"> 
      </script>
 
      <!--
或者是
-->
 
      <script src="http://code.jquery.com/jquery-latest.js"> 
      </script> 
     

步骤二：加上 ui.datepicker.css 跟 ui.datepicker.js jQuery UI Date Picker CSS and the jQuery UI Date Picker Javascript

 
      <style type="text/css">@import url(ui.datepicker.css); 
      </style> 
      
      <script type="text/javascript" src="ui.datepicker.js"> 
      </script>

步骤三：教大家使用四种基本方法：

1. 最基本的语法 (mm/dd/yyyy).

       jQuery 
      ( 
      function 
      ($ 
      ){
  $ 
      ( 
      '#example1' 
      ). 
      datepicker 
      (); 
      
 
      }); 
     

2. 加上旁边图示也可以进行操作

       $ 
      ( 
      '#example2' 
      ). 
      datepicker 
      ({showOn: 
      'both', showOtherMonths: 
      true, 
      
        showWeeks: 
      true, firstDay: 
      1, changeFirstDay: 
      false, 
      
        buttonImageOnly: 
      true, buttonImage: 
      'calendar.gif' 
      }); 
     

3. 改变时间格式

       $ 
      ( 
      '#example4' 
      ). 
      datepicker 
      ({dateFormat: 
      'yy-mm-dd', showOn: 
      'both', 
      
          buttonImageOnly: 
      true, buttonImage: 
      'calendar.gif' 
      }); 
     

4. 选择日期范围

       $ 
      ( 
      '#exampleRange' 
      ). 
      datepicker 
      ({rangeSelect: 
      true, firstDay: 
      1, showOn: 
      'both', 
      
          buttonImageOnly: 
      true, buttonImage: 
      'calendar.gif' 
      }); 
     

5. 初始话时间，加7天

       # 
      
# 增加7天时间 
      
# 
      
$ 
      ( 
      'input selector' 
      ). 
      datepicker 
      ({defaultDate: 
      +7 
      }); 
     