jQuery Mobile date plug-in Mobiscroll usage instructions_jquery

In recent mobile development, I use jQuery Mobile. There are not as many mobile plug-ins as there are Web plug-ins, and there are fewer choices. Some of them need to be packaged by yourself, but the skills are not enough.

JQM also provides a built-in date plug-in, but the style is not good-looking, so I had to use Baidu and Google and found two jquery-mobile-datebox and mobiscroll-2.3

jqueryMobileDatebox does not perform well on the board, and its performance is a bit slow

The performance of mobiscroll is better than the former, the effect is simpler and the swipe is smoother

Let’s compare them together

Dear readers, which one do you think looks better?

Anyway, I think mobiscroll is more effective. Let’s take a look at some ways to use this guy

Step one: Go to the official website to download a compressed package. You need to register before downloading. When downloading, you can choose the framework and skin style you use, see the picture below

It is assumed that you have successfully registered and downloaded

The second step is to create a new HTML5 file, import jquery.js, jquerymobile.js and other necessary files, and write the following code into your file:

 <div data-role="fieldcontain">
     <label for="txtBirthday">出生日期：</label>
     <input type="text" data-role="datebox"  id="txtBirthday" name="birthday" />
 </div>

We can initialize the date control like this:

$('input:jqmData(role="datebox")').mobiscroll().date();

Preview it to see if it is ready to use! Only this interface is in English, which is a bit uncomfortable for Chinese people, and the official website does not provide a Chinese language pack, but it doesn’t matter. The API of the official website is still good. We can set some commonly used attributes to make it conform to the conventional date format. .

//初始化日期控件
  var opt = {
    preset: 'date', //日期
    theme: 'jqm', //皮肤样式
    display: 'modal', //显示方式 
    mode: 'clickpick', //日期选择模式
    dateFormat: 'yy-mm-dd', // 日期格式
    setText: '确定', //确认按钮名称
    cancelText: '取消',//取消按钮名籍我
    dateOrder: 'yymmdd', //面板中日期排列格式
    dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
    endYear:2020 //结束年份
  };
  
  $('input:jqmData(role="datebox")').mobiscroll(opt);

That’s it. Let’s take a look at the renderings

You can see it clearly now. I won’t write it down, just write this much. The DOCS on the official website is very detailed, so I won’t list them one by one here. Friends who are interested can go and study it.