利用My97DatePicker实现年份多选
生活随笔
收集整理的這篇文章主要介紹了
利用My97DatePicker实现年份多选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
昨天，咱們嘗試使用Kalendae實現年份的多選事件，結果發現，該插件不能實現月份以及年份的選擇，更不必說年份的多選的事件了。筆者也不愿多做深究，既然My97DatePicker可以定義選擇年份，何不簡單的改寫改寫它。筆者秉著這個思路，繼續往皮毛之下探索。
先看一下My97DatePicker的習性，俗語講知己知彼，是吧。這個插件調用之后會改變調用位置的顯示內容為當前選擇日期。而且還可以給點擊位置之外的地方，賦值（筆者就準備利用這點）。
一、通過My97DatePicker自帶img
二、通過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" style="width: 300px; height: 30px;"></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()" style="border: 0px; heigth:0px !important; width: 0px !important; font-size: 0px; z-index: -100;"><!-- 根據變化的時間，函數位置 --><img style="float: left; z-index:1000;" 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>五、實現效果
筆者認為，定會有比這更好的實現方式。或者筆者寫的還有未知的bug，期待有興趣的人繼續探究。筆者現在在想，不玩游戲干點啥呢。
轉載于:https://blog.51cto.com/13479739/2163620
總結
以上是生活随笔為你收集整理的利用My97DatePicker实现年份多选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好系统重装助手教您如何设置宽带并连接无线
- 下一篇： 【产品功能】价格信息支持下载