兼容PC和移动页面的mobiscroll日期插件之简单使用

最新推荐文章于 2023-12-04 21:45:00 发布

相思比梦长

最新推荐文章于 2023-12-04 21:45:00 发布

阅读量1.5k

点赞数

分类专栏： WEB前端文章标签： pc 移动端时间插件 mobiscroll

本文链接：https://blog.csdn.net/netuser1937/article/details/53909698

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
	var curr = new Date().getFullYear();
	var opt = {}
	opt.date = {preset : 'date'};
	opt.datetime = { preset : 'datetime', minDate: new Date(2016,01,01,01,01), maxDate: new Date(2099,12,30,23,59), stepMinute:5};
	opt.time = {preset : 'time'};
	opt.select = {preset : 'select'};	   
	$('#start').val('').scroller('destroy').scroller(
        //修改参数传递 php为例
        //$('#start').val('<?php echo $start; ?>').scroller('destroy').scroller(
		$.extend(
			opt['datetime'], 
			{
				theme: 'default', //皮肤样式白色
				//mode:'scroller', //日期选择模式
				mode:'mixed', //日期选择模式
				display:'modal', //显示方式 
				lang:'zh',//
				dateFormat : 'yy/mm/dd', // 日期格式 
			}
		)
	);
});
</script>
<input type="text" name="start" id="start" />

需要去官网下载：mobiscroll.custom-2.6.2.min.css样式文件和js/mobiscroll.custom-2.6.2.min.js脚本文件

注意：$('#start').val('<?php echo $start;?>').scroller('destroy').scroller 中的参数<?php echo $start;?>修改时候使用；

默认为空，即：$('#start').val('').scroller('destroy').scroller

弹窗效果图如下：