昨天，咱們嘗試使用Kalendae實現年份的多選事件，結果發現，該插件不能實現月份以及年份的選擇，更不必說年份的多選的事件了。筆者也不愿多做深究，既然My97DatePicker可以定義選擇年份，何不簡單的改寫改寫它。筆者秉著這個思路，繼續往皮毛之下探索。
先看一下My97DatePicker的習性，俗語講知己知彼，是吧。這個插件調用之后會改變調用位置的顯示內容為當前選擇日期。而且還可以給點擊位置之外的地方，賦值（筆者就準備利用這點）。
一、通過My97DatePicker自帶img
<input readonly="readonly" id="real_function_position" onpropertychange="get_real_select_year()" ><!-- 根據變化的時間，函數位置 -->
<img onclick="WdatePicker({el:$dp.$('real_function_position'),dateFmt:'yyyy'})" src="My97DatePicker/skin/datePicker.gif"><!-- 點擊時間的位置 -->二、通過My97DatePicker插件重新賦值的事件，定義多選函數
var already_select_year = [];//已將選擇的年份數組，若存在刷新當前。此處的初始值應為，封裝數據所得。并且初始化加載時，應同步顯示已選擇的年份。
function get_real_select_year(){
var nowYear = $("#real_function_position").val();
//判斷，當前年份是否為空
if(nowYear != null & nowYear != ''){
//判斷,當前年份，是否在選的數組中
var index = $.inArray(nowYear, already_select_year);
if(index > -1){//含有該列，則不做處理
return;
}else{//展示，用戶的選擇。并數組存儲
already_select_year.push(nowYear);
//展示
document.getElementById("show_user_select").innerHTML +=
"<span id="+ nowYear +">" + nowYear + "<img onclick='delete_select("+ nowYear +")' src=''> </span>"
}
}else{
return;
}
}三、年份選擇后的刪除
//刪除，當前所選年份事件
function delete_select(id){
//數組中除去，該元素
delete_shuzu(already_select_year, id);
//清除，用戶輸入顯示
$("#"+ id).remove();
}
//刪除數組中的元素
function delete_shuzu(arry, obj){
for (var i = 0; i < arry.length; i++){
if(arry[i] == obj){
arry.splice(i, 1);
break;
}
}
}四、貼出整體代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My97DatePicker實現年份多選</title>
</head>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js" ></script>
<style>
.select_year{position: relative;}
.select_year input{position: absolute; left: 8px; top: 0px;}
</style>
<body>
<div id="show_user_select" ></div><!-- 選擇時間后，的顯示位置 -->
<div class="select_year">
<!--若IE低版本，有一個×××警告錯誤“不可見的控件，無法獲取其焦點...”
那么請將real_function_position的type="text"，本文這里已將該輸入框位置置于img圖形之下
onpropertychange只是配IE瀏覽器，此處針對不同類型的瀏覽器應該判斷瀏覽器執行不同的事件
例如：oninput 事件等 -->
<input readonly="readonly" type="hidden" id="real_function_position" onpropertychange="get_real_select_year()" ><!-- 根據變化的時間，函數位置 -->
<img onclick="WdatePicker({el:$dp.$('real_function_position'),dateFmt:'yyyy'})" src="My97DatePicker/skin/datePicker.gif"><!-- 點擊時間的位置 -->
</div>
</body>
<script>
var already_select_year = [];//已將選擇的年份數組，若存在刷新界面。此處的初始值應為，封裝數據所得
function get_real_select_year(){
var nowYear = $("#real_function_position").val();
//判斷，當前年份是否為空
if(nowYear != null & nowYear != ''){
//判斷,當前年份，是否在選的數組中
var index = $.inArray(nowYear, already_select_year);
if(index > -1){//含有該列，則不做處理
return;
}else{//展示，用戶的選擇。并數組存儲
already_select_year.push(nowYear);
//展示
document.getElementById("show_user_select").innerHTML +=
"<span id="+ nowYear +">" + nowYear + "<img onclick='delete_select("+ nowYear +")' src='img/false.png'> </span>"
}
}else{
return;
}
}
//刪除，當前所選年份事件
function delete_select(id){
//數組中除去，該元素
delete_shuzu(already_select_year, id);
//清除，用戶輸入顯示
$("#"+ id).remove();
}
//刪除數組中的元素
function delete_shuzu(arry, obj){
for (var i = 0; i < arry.length; i++){
if(arry[i] == obj){
arry.splice(i, 1);
break;
}
}
}
</script>
</html>
五、實現效果
筆者認為，定會有比這更好的實現方式?；蛘吖P者寫的還有未知的bug，期待有興趣的人繼續探究。筆者現在在想，不玩游戲干點啥呢。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
