首頁 web前端 js教程 jquery日曆外掛程式datepicker用法分析_jquery

jquery日曆外掛程式datepicker用法分析_jquery

May 16, 2016 pm 03:18 PM
jquery 外掛 日曆

本文實例講述了jquery日曆外掛程式datepicker用法。分享給大家參考,具體如下:

我用過好幾種日曆插件,有的太花哨,有的太簡單,有的瀏覽器不相容等等,沒有一個能讓我感到滿意的,後來同事給我推薦了jquery.datepick這個插件,我從官方網站下了一個,親自做了一下,感覺相當的不錯,邏輯和样式可以完全分開,並且非常的靈活,支持30個國家的語言,基本能滿足我的要求。

這裡給出本站下載網址:http://www.jb51.net/jiaoben/19622.html

解壓縮jquery.datepick.package-3.5.2.zip,預設是英文的日曆,裡面有一個jquery.datepick-zh-CN.js,加上這個可以把英文的變以成中文的,示範地址:http://demo.jb51.net/js/2011/jQuery_calendar/index.html

範例程式碼如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Datepicker</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
var nowdays = new Date();
var dateConfig = {
 showOn: 'both',        //二个都显示
 buttonImage: 'calendar.gif', //加载图片
 buttonImageOnly: true,    //显示图片的地方有一个突出部分,这个就是隐藏那玩意的
 changeFirstDay: false,    //这个参数干什么的呢,星期一是日历的第一个,不可以改动的
 numberOfMonths: 2,      //显示二个月,默认一个月
 minDate: nowdays,       //显示最小时间是今天
 dateFormat: 'yy-mm-dd',    //日期格式
 yearRange: '-20:+20'     //前后20年,不过这根minDate是今天有冲突,自己去试吧。
};
 $('#goodplugin').datepick(dateConfig);
 $('#showdate').datepick(dateConfig);
});
</script>
<link type="text/css" href="smoothness.datepick.css" rel="stylesheet" />
</head>
<body>
<h1>jquery 日历插件举例</h1>
<br>
<a href="datepick1.html">样式1</a>
<br>
<a href="datepick2.html">样式2</a>
<br>
<a href="datepick3.html">样式3</a>
<br><br><br>
<div id="showdate"></div>
<br>
<br>
<div>左边直接显示,右边要点击<input type="text" id="goodplugin"/></div>
</body>
</html>

登入後複製

說明:datepick插件裡面有好多參數要設置,這個要根據個人的需要了。詳情請參考jquery的官方網址http://docs.jquery.com/UI/Datepicker#options

更多關於jQuery外掛相關內容有興趣的讀者可查看本站專題:《jQuery常用外掛及用法總結

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

win11雙螢幕行事曆在第二台顯示器上不存在怎麼辦? win11雙螢幕行事曆在第二台顯示器上不存在怎麼辦? Jun 12, 2024 pm 05:47 PM

在Windows11中組織日常工作和例行公事的重要工具是在工作列中顯示時間和日期。此功能通常位於螢幕的右下角,可讓您即時存取時間和日期。透過點擊此區域,您可以調出日曆,從而更輕鬆地檢查即將到來的約會和日期,而無需打開單獨的應用程式。但是,如果您使用多個顯示器,則此功能可能會遇到問題。具體來說,雖然時鐘和日期顯示在所有連接的顯示器上的任務欄上,但點擊第二個顯示器上的日期和時間來顯示日曆的功能不可用。截至目前,此功能僅在主顯示幕上起作用-它與Windows10不同,在Windows10中,按一下任

Outlook行事曆不同步; Outlook行事曆不同步; Mar 26, 2024 am 09:36 AM

如果您的Outlook行事曆無法與Google行事曆、Teams、iPhone、Android、Zoom、Office帳號等同步,請執行下列步驟來解決問題。日曆應用程式可以連接到其他日曆服務,例如Google日曆、iPhone、安卓、微軟Office365等,這是非常有用的,因為它可以自動同步。但如果OutlookCalendar無法與第三方日曆同步怎麼辦?可能的原因可能是選擇錯誤的日曆進行同步,日曆不可見,後台應用程序幹擾,過時的Outlook應用程序或日曆應用程序,等等。修復Outlook日曆不同步的初步

分享Edge瀏覽器不支援此外掛程式的三種解決方法 分享Edge瀏覽器不支援此外掛程式的三種解決方法 Mar 13, 2024 pm 04:34 PM

  用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件,這該如何解決?今日小編就來給大家分享三種解決方法,快來試試看。  方法一:嘗試用其他的瀏覽器。  方法二:瀏覽器上的FlashPlayer可能過時或遺失,導致此外掛程式不受支援狀態,可在官網下載最新版本。  方法三:同時按下「Ctrl+Shift+Delete」鍵。  點選“清除資料”,重新開啟瀏覽器即可。

Chrome的插件擴充功能安裝目錄是什麼 Chrome的插件擴充功能安裝目錄是什麼 Mar 08, 2024 am 08:55 AM

Chrome的插件擴充功能安裝目錄是什麼?正常情況下,Chrome外掛程式擴充功能的預設安裝目錄如下:1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

win10日曆事件沒有彈跳窗提醒怎麼辦?win10日曆事件提醒沒了的恢復方法 win10日曆事件沒有彈跳窗提醒怎麼辦?win10日曆事件提醒沒了的恢復方法 Jun 09, 2024 pm 02:52 PM

行事曆可以幫助使用者記錄你的行程,甚至可以設定提醒,但是也有不少的使用者在詢問win10行事曆事件提醒不彈出怎麼辦?使用者可以先檢查windows更新狀況或是清除windows應用程式商店快取來進行操作就可以了。以下就讓本站來為使用者來仔細的介紹一下win10日曆事件提醒不彈出問題解析吧。新增日曆事件在系統選單中點選「日曆」程式。滑鼠左鍵點擊日曆中的日期。在編輯視窗輸入事件名稱和提醒時間,點選「儲存」按鈕即可新增事件了。 win10日曆事件提醒不彈出問題解決

無期迷途採購辦:日曆和生日系列週邊上新! 無期迷途採購辦:日曆和生日系列週邊上新! Feb 29, 2024 pm 12:00 PM

無期迷途採購辦確定將於2月28日上午11點更新,玩家可以前往淘寶搜尋無期迷途採購辦選擇店鋪分類進行購買,本次為大家帶來的是MBCC生日會系列及2024台歷週邊,一起來看看本次的商品詳情。無期迷途採購辦:日曆和生日系列週邊上新!無期迷途採購辦上新! —預售時間:2024年2月28日11:00-2024年3月13日23:59採購地​​址:淘寶搜尋【無期迷途採購辦】選擇【店鋪】分類即可進店採購;週邊介紹:本次週邊上新為MBCC生日會系列及2024台歷週邊,請點選長圖查閱詳情。採購辦上新周邊介紹—MBCC生

win11時間老是不準確怎麼解決? Win11時間調整教學快速解決時間不準確問題 win11時間老是不準確怎麼解決? Win11時間調整教學快速解決時間不準確問題 Apr 19, 2024 am 09:31 AM

如果您的Windows11電腦顯示時間錯誤,可能會導致許多問題,甚至阻止您連接到網路。事實上,當系統顯示不正確的日期和時間時,某些應用程式會拒絕開啟或執行。那麼應該如何解決這個問題呢?下面一起來看看吧!方法一:1、我們先右鍵點選下方任務欄空白處,選擇工作列設定2、在工作列設定中找到右側的taskbarcorneroverflow3、然後在它上方找到clock或時鐘選擇開啟即可。方法二:1.按下鍵盤快速鍵win+r調出運行,輸入regedit回車確定。 2、開啟登錄編輯器,在其中找到HKEY

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

See all articles