推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
三款日期選擇插件推薦給大家：
1.My97DatePicker
純?cè)鶭S，專注于PC端，支持IE6+；頁(yè)面上只需要引入WdatePicker.js文件，但是My97DatePicker整個(gè)目錄是一個(gè)整體，最好不要破壞里面的目錄結(jié)構(gòu)，否則就會(huì)報(bào)錯(cuò)找不到指定文件。
(1)直接在html文件中寫(xiě)入
<input id="ipt" type="text" onclick="WdatePicker()" />
注意：由于此插件是原生JS寫(xiě)的，所以綁定點(diǎn)擊事件請(qǐng)務(wù)必請(qǐng)用原生JS的點(diǎn)擊事件綁定方法，如果使用$('#ipt').on('click',function( ){ })，在選中一個(gè)日期并失去焦點(diǎn)后，想要重新選擇就必須點(diǎn)擊兩次次才能喚起日歷。
(2)如果給輸入框添加class="Wdate"，輸入框的右邊會(huì)出現(xiàn)一個(gè)日期圖標(biāo)。
(3)可以通過(guò)其他元素來(lái)彈出日期選擇框，直接給該元素添加onclick="WdatePicker({el: '#ipt'})"
(4)可以通過(guò)添加position屬性來(lái)定義彈出位置，例如 onclick="WdatePicker({position: {left:100,top:50}})"
(5)可以通過(guò)添加dateFmt屬性來(lái)定義日期格式，例如 onclick="WdatePicker({dateFmt: 'MM-yy'})"
(6)如果沒(méi)有定義onpicked和oncleared事件，將自動(dòng)觸發(fā)文本框的onchange事件，定義這些事件的方式如下
document.getElementById('ipt').onclick = function(){
WdatePicker({
onpicked: function(){
// 配合jquery.validate.js插件，在這里手動(dòng)添加校驗(yàn)
},
oncleared: function(){
// 配合jquery.validate.js插件，在這里手動(dòng)添加校驗(yàn)
},
});
}
(7)可以實(shí)現(xiàn)日期選擇聯(lián)動(dòng)
<input id="d5221" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" />
<input id="d5222" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />
(8)還能將選中的值拆分到文本框
<input type="text" id="d523_y" size="5" /> 年
<input type="text" id="d523_M" size="3" /> 月
<input type="text" id="d523_d" size="3" /> 日
<input type="text" id="d523_HH" size="3" /> 時(shí)
<input type="text" id="d523_mm" size="3" /> 分
<input type="text" id="d523_ss" size="3" /> 秒
<img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />
<script>
function pickedFunc(){
$dp.$('d523_y').value=$dp.cal.getP('y');
$dp.$('d523_M').value=$dp.cal.getP('M');
$dp.$('d523_d').value=$dp.cal.getP('d');
$dp.$('d523_HH').value=$dp.cal.getP('H');
$dp.$('d523_mm').value=$dp.cal.getP('m');
$dp.$('d523_ss').value=$dp.cal.getP('s');
}
</script>
更多功能和參數(shù)請(qǐng)去官網(wǎng)查詢http://www.my97.net/dp/demo/resource/3.asp。
2.jquery.datepicker.js
主要用于PC端，需要同時(shí)引入jquery.js和jquery-ui.js，樣式方面除了引入jquery-ui.css，還要帶上jquery-ui目錄中的images文件夾，否則就會(huì)報(bào)錯(cuò)找不到指定的文件。
(1)引入相關(guān)文件后，直接就是$('#ipt').datepicker( );
(2)常用的幾個(gè)參數(shù)配置如下
$("#ipt").datepicker({
numberOfMonths:1, // 顯示幾個(gè)月
showButtonPanel:true, // 是否顯示按鈕面板
dateFormat: 'yy-mm-dd', // 日期格式
clearText:"清除", // 清除日期的按鈕名稱
closeText:"關(guān)閉", // 關(guān)閉選擇框的按鈕名稱
yearSuffix: '年', // 年的后綴
showMonthAfterYear:true, // 是否把月放在年的后面
defaultDate:'2011-03-10', // 默認(rèn)日期
minDate:'2011-03-05', // 最小日期
maxDate:'2011-03-20', // 最大日期
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(selectedDate) {
// 選擇日期后執(zhí)行的操作
alert(selectedDate);
}
});
3.Mobiscroll
專注于移動(dòng)端，依賴于jquery類庫(kù)，有多種樣式可供選擇，根據(jù)需要引入各類文件。
(1)demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Mobiscroll日期時(shí)間插件</title>
<!-- 核心CSS樣式 -->
<link href="dev/css/mobiscroll.core-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<!-- 添加動(dòng)畫(huà)效果 -->
<!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->
<!-- 安卓樣式 -->
<link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<!-- 或者引用一整個(gè)壓縮好的css文件 -->
<!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
.dwl{
font-size: 20px;
}
.dwbg .dwb{
font-size: 20px;
}
table td:first-child{
padding-right: 15px;
}
table td:last-child{
padding-left: 15px;
}
table .dww{
min-width: 150px !important;
}
</style>
</head>
<body>
<input type="text" name="appDate" id="appDate" />
<!-- jquery類庫(kù) -->
<script src="dev/jquery-1.9.1.js"></script>
<!-- 核心js文件 -->
<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<!-- 添加中文 -->
<!-- <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> -->
<!-- 針對(duì)日期時(shí)間 -->
<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<!-- 添加中文 -->
<!-- <script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> -->
<!-- 安卓端 -->
<!-- <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> -->
<!-- 或者引用一整個(gè)壓縮好的js文件 -->
<!-- <script src="js/mobiscroll.custom-2.5.2.min.js" type="text/javascript"></script> -->
<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
opt.default = {
theme: 'android-ics light', // 皮膚樣式
display: 'bottom', // 顯示方式
mode: 'scroller', // 日期選擇模式
startYear: currYear , //開(kāi)始年份
endYear: currYear + 30, //結(jié)束年份
dateFormat: 'mm/yyyy ', // 日期格式
dateOrder: 'mmyy', // 面板中日期排列格
setText: '確定', // 確認(rèn)按鈕名稱
cancelText: '取消',// 取消按鈕名籍我
monthText: '月', // 面板中月文字
yearText: '年', // 面板中年文字
};
$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
});
</script>
</body>
</html>
(2)解決與移動(dòng)端軟鍵盤(pán)的定位沖突
如果頁(yè)面有多個(gè)輸入框，當(dāng)點(diǎn)擊一個(gè)輸入框時(shí)會(huì)喚起設(shè)備自帶的軟鍵盤(pán)，然后如果直接點(diǎn)擊另一個(gè)id名為appDate的日期輸入框，即失去焦點(diǎn)的同時(shí)，獲取到了mobiscroll綁定的輸入框的焦點(diǎn)，結(jié)果發(fā)現(xiàn)之前的軟鍵盤(pán)下沉消失之后，本該顯示在底部的日期選擇部件顯示在了屏幕的上方，解決辦法是找到mobiscroll.core-2.5.2.js 這個(gè)文件，搜索focus關(guān)鍵字，將對(duì)應(yīng)的地方改成：
elm.bind('focus.dw', function () {
setTimeout(function(){
that.show();
},300)
});
其中300ms就是設(shè)置的延遲時(shí)間，這樣以來(lái)再做相同的操作，就是等之前的軟鍵盤(pán)下沉消失之后從底部浮上顯示日期選擇部件。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript前端開(kāi)發(fā)時(shí)數(shù)值運(yùn)算的小技巧
這篇文章主要介紹了JavaScript前端開(kāi)發(fā)時(shí)數(shù)值運(yùn)算的小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript 中的try catch應(yīng)用總結(jié)
這篇文章主要介紹了javascript 中的try catch應(yīng)用總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
js 通過(guò)cookie實(shí)現(xiàn)刷新不變化樹(shù)形菜單
通過(guò)設(shè)置cookie來(lái)保存樹(shù)形菜單的狀態(tài)，在頁(yè)面加載時(shí)重新讀取cookie來(lái)設(shè)置菜單2014-10-10
Javascript讀取json文件方法實(shí)例總結(jié)
json文件是一種輕量級(jí)的數(shù)據(jù)交互格式,下面這篇文章主要給大家介紹了關(guān)于Javascript讀取json文件方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動(dòng)態(tài)加載js文件多種解決辦法，有需要的朋友可以參考一下2013-11-11
JavaScript庫(kù)urlcat?之URL構(gòu)建器庫(kù)
這篇文章主要介紹了JavaScript庫(kù)urlcat之URL構(gòu)建器庫(kù)，urlcat?是一個(gè)小型的JavaScript庫(kù)，使構(gòu)建URL非常方便并防止常見(jiàn)錯(cuò)誤。下文來(lái)看對(duì)其詳細(xì)介紹吧，需要的小伙伴可以參考一下2022-02-02
今天小編就為大家分享一篇layui框架與SSM前后臺(tái)交互的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JavaScript原型式繼承實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript原型式繼承實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
效果直逼flash的Div+Css+Js菜單...2007-05-05