Mobile date and selection plug-in mobiscroll-JS Tutorial-php.cn

Mobile date and selection plug-in mobiscroll

不言

Release： 2018-07-09 17:30:27

Original

3703 people have browsed it

This article mainly introduces the mobile date and selection plug-in mobiscroll. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

In many forms, we Date plug-ins are often used. There are many such plug-ins. Here is a very useful mobile date plug-in: mobiscroll

First introduce the plug-in related files

<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>

Copy after login

Find the date element div that needs to be inserted

<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" />

Copy after login

Initialization

$(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;]));
});

Copy after login

The renderings are as follows:

The plug-in also has a select function. You can check the jq plug-in official website.

The above is the entire content of this article. I hope it will be helpful to everyone. Learning will be helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

js moves any element to a specified position

About the implementation of JS effect function

The above is the detailed content of Mobile date and selection plug-in mobiscroll. For more information, please follow other related articles on the PHP Chinese website!