利用My97DatePicker实现年份多选
生活随笔
收集整理的這篇文章主要介紹了
利用My97DatePicker实现年份多选
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
昨天，咱們嘗試使用Kalendae實(shí)現(xiàn)年份的多選事件，結(jié)果發(fā)現(xiàn)，該插件不能實(shí)現(xiàn)月份以及年份的選擇，更不必說(shuō)年份的多選的事件了。筆者也不愿多做深究，既然My97DatePicker可以定義選擇年份，何不簡(jiǎn)單的改寫(xiě)改寫(xiě)它。筆者秉著這個(gè)思路，繼續(xù)往皮毛之下探索。
先看一下My97DatePicker的習(xí)性，俗語(yǔ)講知己知彼，是吧。這個(gè)插件調(diào)用之后會(huì)改變調(diào)用位置的顯示內(nèi)容為當(dāng)前選擇日期。而且還可以給點(diǎn)擊位置之外的地方，賦值（筆者就準(zhǔn)備利用這點(diǎn)）。
一、通過(guò)My97DatePicker自帶img
二、通過(guò)My97DatePicker插件重新賦值的事件，定義多選函數(shù)
var already_select_year = [];//已將選擇的年份數(shù)組，若存在刷新當(dāng)前。此處的初始值應(yīng)為，封裝數(shù)據(jù)所得。并且初始化加載時(shí)，應(yīng)同步顯示已選擇的年份。function get_real_select_year(){var nowYear = $("#real_function_position").val();//判斷，當(dāng)前年份是否為空if(nowYear != null & nowYear != ''){//判斷,當(dāng)前年份，是否在選的數(shù)組中var index = $.inArray(nowYear, already_select_year);if(index > -1){//含有該列，則不做處理return;}else{//展示，用戶的選擇。并數(shù)組存儲(chǔ)already_select_year.push(nowYear);//展示document.getElementById("show_user_select").innerHTML +="<span id="+ nowYear +">" + nowYear + "<img onclick='delete_select("+ nowYear +")' src=''> </span>"} }else{return;}}三、年份選擇后的刪除
//刪除，當(dāng)前所選年份事件function delete_select(id){//數(shù)組中除去，該元素delete_shuzu(already_select_year, id);//清除，用戶輸入顯示$("#"+ id).remove();}//刪除數(shù)組中的元素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實(shí)現(xiàn)年份多選</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><!-- 選擇時(shí)間后，的顯示位置 --><div class="select_year"><!--若IE低版本，有一個(gè)×××警告錯(cuò)誤“不可見(jiàn)的控件，無(wú)法獲取其焦點(diǎn)...”那么請(qǐng)將real_function_position的type="text"，本文這里已將該輸入框位置置于img圖形之下onpropertychange只是配IE瀏覽器，此處針對(duì)不同類型的瀏覽器應(yīng)該判斷瀏覽器執(zhí)行不同的事件例如：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;"><!-- 根據(jù)變化的時(shí)間，函數(shù)位置 --><img style="float: left; z-index:1000;" onclick="WdatePicker({el:$dp.$('real_function_position'),dateFmt:'yyyy'})" src="My97DatePicker/skin/datePicker.gif"><!-- 點(diǎn)擊時(shí)間的位置 --></div></body><script>var already_select_year = [];//已將選擇的年份數(shù)組，若存在刷新界面。此處的初始值應(yīng)為，封裝數(shù)據(jù)所得function get_real_select_year(){var nowYear = $("#real_function_position").val();//判斷，當(dāng)前年份是否為空if(nowYear != null & nowYear != ''){//判斷,當(dāng)前年份，是否在選的數(shù)組中var index = $.inArray(nowYear, already_select_year);if(index > -1){//含有該列，則不做處理return;}else{//展示，用戶的選擇。并數(shù)組存儲(chǔ)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;}}//刪除，當(dāng)前所選年份事件function delete_select(id){//數(shù)組中除去，該元素delete_shuzu(already_select_year, id);//清除，用戶輸入顯示$("#"+ id).remove();}//刪除數(shù)組中的元素function delete_shuzu(arry, obj){for (var i = 0; i < arry.length; i++){if(arry[i] == obj){arry.splice(i, 1);break;} }}</script></html>五、實(shí)現(xiàn)效果
筆者認(rèn)為，定會(huì)有比這更好的實(shí)現(xiàn)方式。或者筆者寫(xiě)的還有未知的bug，期待有興趣的人繼續(xù)探究。筆者現(xiàn)在在想，不玩游戲干點(diǎn)啥呢。
轉(zhuǎn)載于:https://blog.51cto.com/13479739/2163620
總結(jié)
以上是生活随笔為你收集整理的利用My97DatePicker实现年份多选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 好系统重装助手教您如何设置宽带并连接无线
- 下一篇： 【产品功能】价格信息支持下载