用mobiscroll.js如何简单使用日期控件

首先，可以到官网学习，地址：https://docs.mobiscroll.com

第一步：引用js、css样式

1）mobiscroll.css

2）mobiscroll_date.css

3）jquery.min.js

4）mobiscroll_date.js

5）mobiscroll.js

第二步：用官网例子测试

在html中的<body>下添加

<input id="date"/>

在js中添加

$(function () {
    // Create a datepicker
    $("#date").mobiscroll().date({ 
        theme: 'ios', 
        display: 'bottom'
    });
});

效果图是这样的：

但是这样12/19/2017不符合我们中国日期显示方式，所以我在网上找到一个可以中文显示的方式

js、css样式只需要引入

1）mobiscroll-2.13.2.full.min.css

2）jquery.min.js

3）mobiscroll-2.13.2.full.min.js

html中添加

      <label>出生日期：</label>
      <input  type="text" name="BirthDate" id="BirthDate"  style='width:300px;height:25px;'  readonly  placeholder="请填写出生日期"  />
      <label>月经日期：</label>
      <input type="text" name="PregDate" id="PregDate"  style='width:300px;height:25px;' readonly  placeholder="请填写末次月经日期" /><br/>

在js中添加

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

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

页面input弹出效果图是这样的：

页面input加载后效果是这样的：

页面input选中后效果是这样的：

使用的js、css下载地址来源：

https://www.cnblogs.com/Look_Sun/p/4482103.html

posted @ 2017-12-19 10:28  小小邪  阅读(1762)  评论(1)  编辑  收藏  举报