移動端日期及選擇外掛程式mobiscroll

2022-08-17 18:45:08 字數 1248 閱讀 4708

在很多的form表單中，我們經常會用到日期外掛程式，這類外掛程式比較多，這裡推薦乙個很好用的移動端日期外掛程式：mobiscroll

首先引入外掛程式相關檔案

<


link 


href


="css/mobiscroll.css"


rel="stylesheet"


/>


<


link 


href


="css/mobiscroll_date.css"


rel="stylesheet"


/>


<


script 


src="js/jquery.min.js"


>


script


>


<


script 


src="js/mobiscroll_date.js"


>


script


>


<


script 


src="js/mobiscroll.js"


>


script


>
找到需要插入的日期元素div

<


input 


style


="display:inline-block;width: 72%;height: 0.6rem;border:1px solid #ccc;text-align: left;font-size:0.24rem;"


name


="page1_time"


type


="text"


name


="user_age"


id="user_age"


readonly class


="input"


/>
初始化

$(document).ready(function() ;


opt.date = ;


opt.datetime = ;


opt.time = ;


opt.default = ;    


$("#user_age").mobiscroll($.extend(opt['date'],opt['default']));


});
效果圖如下：

外掛程式還有select選擇的功能，可以檢視jq外掛程式官網

移動端日期外掛程式

最近碼 時，遇到移動端日期外掛程式的呼叫，試了好幾種方法，最後選擇mobiscroll期外掛程式，實現在移動端滾動選擇日期 1 使用前，首先需要引入css和js檔案，我使用的是 mobiscroll.custom 2.6.2.min.css mobiscroll.custom 2.6.2.min.j...

移動端material風格日期時間選擇器

好多時候在移動端需要乙個的日期選擇器，由於在應用上有可能應用各種框架庫 vue.js,react.js,zepto.js等 所以說乙個無依賴的，這樣易於上層進行封裝。直接開門見山，先來張 看看效果 可以看出整個風格就是 material design 風格的，主要特點就是 利用webpack打包，支...

移動端material風格日期時間選擇器

原文 好多時候在移動端需要乙個的日期選擇器，由於在應用上有可能應用各種框架庫 vue.js,react.js,zepto.js等 所以說乙個無依賴的，這樣易於上層進行封裝。直接開門見山，先來張 看看效果 可以看出整個風格就是 material design 風格的，主要特點就是 利用webpack打...