首頁  >  文章  >  web前端  >  行動端日期及選擇插件mobiscroll

行動端日期及選擇插件mobiscroll

不言
不言原創
2018-07-09 17:30:273723瀏覽

這篇文章主要介紹了關於行動裝置日期及選擇插件mobiscroll ,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

在很多的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

d3fdb0bf1d3e1de2bc8f24a7a416531d

  初始化

$(document).ready(function() {
    var currYear = (new Date()).getFullYear();    
    var opt={};
    opt.date = {preset : &#39;date&#39;};
    opt.datetime = {preset : &#39;datetime&#39;};
    opt.time = {preset : &#39;time&#39;};
    opt.default = {
        theme: &#39;android-ics light&#39;, //皮肤样式
        display: &#39;modal&#39;, //显示方式 
        mode: &#39;scroller&#39;, //日期选择模式
        dateFormat: &#39;yyyy-mm-dd&#39;,
        lang: &#39;zh&#39;,
        showNow: true,
        nowText: "今天",
        startYear: currYear - 50, //开始年份
        endYear: currYear + 10 //结束年份
    };    
    $("#USER_AGE").mobiscroll($.extend(opt[&#39;date&#39;],opt[&#39;default&#39;]));
});

#  效果圖如下:

  

  插件還有select選擇的功能,可以查看jq插件官網

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

js將任意元素移到指定位置

#關於JS效果功能的實作

以上是行動端日期及選擇插件mobiscroll的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn