Jquery日期選擇datepicker插件用法實例分析

 更新時間:2015-06-08 21:11:23   作者:佚名   我要評論(0)

本文實例講述了Jquery日期選擇datepicker插件用法。分享給大家供大家參考。具體如下:1、首先將Jquery中的datepicker插件中的相關屬性值改成中文的:?

 本文實例講述了Jquery日期選擇datepicker插件用法。分享給大家供大家參考。具體如下:

1、首先將Jquery中的datepicker插件中的相關屬性值改成中文的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.datepicker.regional['zh-CN'] = { 
  clearText: '清除'
  clearStatus: '清除已選日期'
  closeText: '關閉'
  closeStatus: '不改變當前選擇'
  prevText: '<上月'
  prevStatus: '顯示上月'
  prevBigText: '<<'
  prevBigStatus: '顯示上一年'
  nextText: '下月>'
  nextStatus: '顯示下月'
  nextBigText: '>>'
  nextBigStatus: '顯示下一年'
  currentText: '今天'
  currentStatus: '顯示本月'
  monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], 
  monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], 
  monthStatus: '選擇月份'
  yearStatus: '選擇年份'
  weekHeader: '周'
  weekStatus: '年內周次'
  dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
  dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
  dayNamesMin: ['日','一','二','三','四','五','六'], 
  dayStatus: '設置 DD 為一周起始'
  dateStatus: '選擇 m月 d日, DD'
  dateFormat: 'yy-mm-dd'
  firstDay: 1, 
  initStatus: '請選擇日期'
  isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

2、html頁面中有兩個日期輸入框,分別為起始日期和結束日期:

1
2
<label for="start-datepicker">起始日期:</label> <input type="text" class="datepicker test-image-datepicker" id="start-datepicker" size="15" />  
<label for="end-datepicker">結束日期:</label> <input type="text" class="datepicker test-image-datepicker" id="end-datepicker" size="15" />

3、調用修改后的datepicker插件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var $start_date_value = "2012年1月1日"; // TODO 改成可以配置的
var $end_date_value = new Date();
// When document has loaded, initialize pagination and form 
$(document).ready(function(){  
 $(".imagezz").click($test_image_check_box_click);
 $( ".test-image-datepicker" ).datepicker({
 changeMonth: true,
 changeYear: true,
 showOn: "both",
 buttonImage: "images/calendar.gif",
 buttonImageOnly: true,
 showButtonPanel: true,
 onSelect: function(dateText, inst){
   if ($(this).attr("id") == "start-datepicker") {
    $start_date_value = dateText;
   }
   if ($(this).attr("id") == "end-datepicker") {
    $end_date_value = dateText;
   }
   //下面可以寫一些根據日期變化引起頁面相關部分修改的函數
   //......
  }
});
$(".test-image-datepicker").datepicker("option", "dateFormat", "yy年mm月dd日");
$('.test-image-datepicker').attr("readonly","readonly");
$("#start-datepicker").datepicker("setDate",$start_date_value);
$("#end-datepicker").datepicker("setDate",$end_date_value);

datepicker其余選項及方法詳見:http://api.jqueryui.com/datepicker/

相關文章

  • 深入理解nodejs搭建靜態服務器(實現命令行)

    深入理解nodejs搭建靜態服務器(實現命令行)

    靜態服務器 使用node搭建一個可在任何目錄下通過命令啟動的一個簡單http靜態服務器 完整代碼鏈接 安裝:npm install yg-server -g 啟動:yg-server
    2019-02-06
  • 詳解webpack編譯速度提升之DllPlugin

    詳解webpack編譯速度提升之DllPlugin

    一、前言 The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu
    2019-02-06
  • Vue從TodoList中學父子組件通信

    Vue從TodoList中學父子組件通信

    簡單的 TodoList 實現一個簡單的 todolist,當我輸入內容后,點擊提交自動添加在下面,如下圖所示: 用代碼實現這個效果: <div id="app"> <input ty
    2019-02-06
  • Tensorflow分類器項目自定義數據讀入的實現

    Tensorflow分類器項目自定義數據讀入的實現

    在照著Tensorflow官網的demo敲了一遍分類器項目的代碼后,運行倒是成功了,結果也不錯。但是最終還是要訓練自己的數據,所以嘗試準備加載自定義的數據,然而d
    2019-02-06
  • ES6 對象的新功能與解構賦值介紹

    ES6 對象的新功能與解構賦值介紹

    ES6 通過字面量語法擴展、新增方法、改進原型等多種方式加強對象的使用,并通過解構簡化對象的數據提取過程。 一、字面量語法擴展 在 ES6 模式下使用字
    2019-02-06
  • Redis連接錯誤的情況總結分析

    Redis連接錯誤的情況總結分析

    前言 最近由于流量增大,redis 出現了一連串錯誤,比如: LOADING Redis is loading the dataset in memory use of closed network connection connec
    2019-02-06
  • 使用TensorFlow實現二分類的方法示例

    使用TensorFlow實現二分類的方法示例

    使用TensorFlow構建一個神經網絡來實現二分類,主要包括輸入數據格式、隱藏層數的定義、損失函數的選擇、優化函數的選擇、輸出層。下面通過numpy來隨機生成一
    2019-02-06
  • PHP實現字符串大小寫轉函數的功能實例

    PHP實現字符串大小寫轉函數的功能實例

    字符串的大小寫轉換功能在日常中經常使用。那么如何實現一個簡單的大小寫轉換功能呢&#63; 在php中,最終使用的是c語言的toupper,tolower函數將字符進行大小寫
    2019-02-06
  • Nginx代理時header頭中帶"_"信息丟失問題的解決

    Nginx代理時header頭中帶"_"信息丟失問題的解決

    前言 開發網關項目時,在請求時往請求頭header中放入了簽名sign_key信息,在接收請求時再從header中拿出,在本地調試時是可以的,但上線之后通過Nginx代理之后
    2019-02-06
  • Python實現E-Mail收集插件實例教程

    Python實現E-Mail收集插件實例教程

    __import__函數 我們都知道import是導入模塊的,但是其實import實際上是使用builtin函數import來工作的。在一些程序中,我們可以動態去調用函數,如果我們
    2019-02-06

最新評論

黑龙江新11选5开奖结果