mobiscroll 样式修改

这段代码展示了如何使用Mobiscroll库来定制日期、时间和日期时间选择器的样式和行为。通过设置不同的配置选项,如preset、theme、display、mode、lang、height、startYear和endYear等,实现了对 Mobiscroll 的个性化调整,使其更适合在移动设备上使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script type="text/javascript">
        $(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
opt.datetime = {preset : 'datetime'};
opt.time = {preset : 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
       display: 'modal', //显示方式 
       mode: 'scroller', //日期选择模式
lang:'zh',
height: 15,//这里设高,原来的太高了
rows: 1,//这里改成1行,原来的是3行,苹果手机看不到确认按扭
       startYear:currYear - 10, //开始年份
       endYear:currYear + 10 //结束年份

};


$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
  var optDateTime = $.extend(opt['datetime'], opt['default']);
  var optTime = $.extend(opt['time'], opt['default']);
   $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
   $("#appTime").mobiscroll(optTime).time(optTime);

$("#appDate2").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
  var optDateTime2 = $.extend(opt['datetime'], opt['default']);
  var optTime2 = $.extend(opt['time'], opt['default']);
   $("#appDateTime2").mobiscroll(optDateTime2).datetime(optDateTime2);
   $("#appTime2").mobiscroll(optTime2).time(optTime2);


        });
    </script>



.android-ics .dw .dwwol {

    width: 60%;
    left: 20%;
    height: 25px;
    border-top: 1px solid #31b6e7;
    border-bottom: 1px solid #31b6e7;
    margin-top: -15px;
    display: block;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值