DatePicker 日期选择
MobiScroll PLUGIN
MobiScroll是目前发现比较好用的日期选择插件，官方有诸多个依赖版本，本框架使用的版本是v4.3.2jqury版本。本框架除了定义了一套皮肤没有修改其任何文件，大家可放心试用。因为该插件是商业版，尊重开发者的劳动成果非付费请尽量不商用。官方地址在这里。请参见演示效果：
使用插件前请先引用相应的css和js：
<link href="src/plugins/mobiscroll/css/mobiscroll.jquery.css" rel="stylesheet" type="text/css" >
<script src="src/plugins/mobiscroll/js/mobiscroll.jquery.min.js" type="text/javascript"></script>
请参见演示效果：
日期选择：
时间选择：
时间段选择：
时期+时间：
当前日期：
行内日期：
-
$('#datepicker01').mobiscroll().calendar({ theme: 'ax', lang:'zh', onBeforeShow:function(event, inst){//显示前的点击事件 $('#'+this.id).addClass('ax-focus');//input焦点 //inst.settings.cssClass='ax-mask';//添加遮罩 }, onClose: function (event, inst) {//关闭事件 $('#'+this.id).removeClass('ax-focus'); }, display: 'bubble', }); $('#datepicker02').mobiscroll().date({ theme: 'ax', lang:'zh', onBeforeShow:function(event, inst){//显示前的点击事件 $('#'+this.id).addClass('ax-focus'); //inst.settings.cssClass='ax-mask';//添加遮罩 }, onClose: function (event, inst) {//关闭事件 $('#'+this.id).removeClass('ax-focus'); }, display: 'bubble', rows:5, }); $('#datepicker03').mobiscroll().range({ theme: 'ax', lang:'zh', onBeforeShow:function(event, inst){//显示前的点击事件 $('#'+this.id).addClass('ax-focus'); //inst.settings.cssClass='ax-mask';//添加遮罩 }, onClose: function (event, inst) {//关闭事件 $('#'+this.id).removeClass('ax-focus'); }, display: 'bubble', }); $('#datepicker04').mobiscroll().calendar({ theme: 'ax', lang:'zh', onBeforeShow:function(event, inst){//显示前的点击事件 $('#'+this.id).addClass('ax-focus'); //inst.settings.cssClass='ax-mask';//添加遮罩 }, onClose: function (event, inst) {//关闭事件 $('#'+this.id).removeClass('ax-focus'); }, display: 'bubble', //buttons: ['set', 'cancel'],//display: 'center'时候显示底部按钮 controls: ['calendar', 'time'], }); $('#datepicker05').mobiscroll().calendar({ theme: 'ax', lang:'zh', display: 'inline', }); -
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">日期选择：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择日期" type="text" id="datepicker01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">时间选择：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择时间" type="text" id="datepicker02"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">时间段选择：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择时间段" type="text" id="datepicker03"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">时期+时间：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择时间" type="text" id="datepicker04"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">当前日期：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择时间" type="text" id="datepicker06"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">行内日期：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择日期" type="text" id="datepicker05"></div> </div> </div> </div>
以下列举MobiScroll中时间日期常用的参数说明，更多请参见官方API。
theme:'ax'主题风格，ax是本框架的定制主题风格，简约美观，欢迎使用。lang:'zh'插件的语言，zh是指中文。onBeforeShow点击input之后的事件，实例中点击让input聚焦。onClose关闭插件后的事件，实例中关闭后让input失焦。touchUi:false关闭触屏模式，默认是true，使用false之后会隐藏确定和关闭按钮度。display:'bubble'显示方式，默认是bubble定位气泡，其他可选：top顶部展开，bottom底部展开，center居中窗口，inline是在页面直接呈现。controls: ['calendar', 'time']显示底部按钮显示方式，display:'center'时有效。rtl: true按钮排序，默认是false即确定按钮在右侧，true则确定按钮在左侧。inputClass:'ax-input-mbsc'初始化给input添加样式。cssClass:'ax-mobiscroll'初始化给mobiscroll添加样式。