天天看點

jq仿蘋果的時間/日期選擇效果

1.html檔案,index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./pickDater.js"></script>
    <style>
        body{position: absolute;width: 100%;height: 100%}
        ul{list-style: none;margin: 0}
    </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">

</body>
</html>
      

  檢視效果時候把浏覽器調成手機模式

2.插件 連結位址: http://files.cnblogs.com/files/jiebba/pickDater.js  ,

  引用插件

3.調用插件

  1.調用  日期

var opt={
        startY:1990,   //開始時間
        endY:2050,      //結束事件
        mPickerType:1,  
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);      
jq仿蘋果的時間/日期選擇效果

  2.調用 時間

var opt={
        startY:1990,   //開始時間
        endY:2050,      //結束事件
        mPickerType:2,
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);
      

  

jq仿蘋果的時間/日期選擇效果

  3.調用 日期和時間

var opt={
        startY:1990,   //開始時間
        endY:2050,      //結束事件
        mPickerType:3,
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);
      
jq仿蘋果的時間/日期選擇效果

代碼僅供參考,具體功能可以自己擴充。

個人部落格 :很多好用的 npm 包 , 可以看看 

 https://gilea.cn/

 

http://www.cnblogs.com/jiebba

    我的部落格,來看吧!

github:  

https://github.com/longfei59418888/vui

   (很不錯的vue2.0元件庫,記得給一個 start,以後有一起讨論,各種好元件)

繼續閱讀