使用Mobiscroll插件 输入框初始化默认出错问题

最新推荐文章于 2020-07-28 18:41:31 发布
最新推荐文章于 2020-07-28 18:41:31 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： 问题记录 文章标签： mobiscroll 时间插件-input input初始化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37805167/article/details/78087031
版权

使用步骤:
1. 首先,使用mobiscroll插件之前引用以及下载好需要使用到的css以及js文件
2. 在要使用时间插件的html文件中创建input标签
3. 在body底部写入js的配置项,并进行调用即可.

问题描述

在使用中我们常常需要给予input框一个默认值,我们预期想法就是当点击输入框时,时间插件显示与默认值一致,但情况并非如此,图中input的默认值为2017-09-30,但是显示出来的时间为2000-09-30,年份不对,月份与日期是对的,但具体因为什么出现的2000我还不太清楚.

这里写图片描述

开始查找原因,找到了这个文件,发现文件中规定了格式,而在自己写的配置中写的时间格式(自己开始写的是yyyy-mm-dd)与其中的格式(yy-mm-dd)不符.
于是我尝试让两者保持一致.

这里写图片描述

这里写图片描述

运行效果出现:

这里写图片描述

我叫陈小皮。
关注
专栏目录
mobiscroll-2.5.2 默认值
08-26
mobiscroll 是不能默认选中时间的,但是在开发中往往需要选中默认时间,我发现 <input type="text" name="appDateTime" value="2018-08-08 8:08" id="appDateTime" /> 中 的 value 值可以将年份之后的时间默认选中, 而 minDate: new Date(2020,3,10,9,22), 又可以将最小时间限制,这样以来也算是选中默认时间了吧
mobiscroll-master插件--支持设置初始值
08-24
解压附件，打开indexhtml, defaultValue就是初始值。 使用手册：http://docs.mobiscroll.com/2-14-0/datetime#!opt-stepMinute $('#demo_date').mobiscroll().date({ theme: 'android-holo', // Specify theme like: theme: 'ios' or omit setting to use default mode: mode, // Specify scroller mode like: mode: 'mixed' or omit setting to use default display: display, // Specify display mode like: display: 'bottom' or omit setting to use default lang: 'zh', // Specify language like: lang: 'pl' or omit setting to use default defaultValue : new Date('1998-2-3'), dateFormat: 'yyyy-mm-dd ', //startYear:currYear-120, //开始年份 //endYear:currYear , //结束年份 });
关于mobiscroll.js的文本框初始化问题
m1的博客
04-15 8765
使用版本mobiscroll.custom-2.16.1.min.js具体组件可以去官网http://download.mobiscroll.com/下载，不过需要收费，有破解版方法可以看下http://blog.csdn.net/cdnight/article/details/49306957这篇文章，写的太棒了。
mobiscroll初始化数据添加年月日
qq_31182399的博客
07-28 463
$("#receiveSjzsj-time").mobiscroll().time({ theme: ‘ios’, lang: ‘zh’, mode: ‘scroller’, onInit: function (inst) { inst.settings.wheels[0] = _.map(inst.settings.wheels[0], function (wheelItem, key) { var labelText = wheelItem.lab
关于mobiscroll日期插件无法正确的选中默认日期
Ethan Mr.的博客
06-09 851
在使用这个插件的时候遇到了一个问题，所以记录一下 1，先看一下错误的代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>mobiscroll</title> <meta name="fo...
手机端漂亮的日期插件mobiscroll，免费使用
01-09
mobiscroll，很漂亮的日期插件，兼容性好，支持web、APP、wap手机端开发；附件包含了一张效果图，其他效果调整参数即可见。 本附件亮点： 1，下载附件即可免费使用（官方下载需收费，网址：...
移动端日期插件Mobiscroll.js使用详解
10-20
在JavaScript中，初始化日期控件通常需要使用Mobiscroll提供的方法。以Mobiscroll.js为例，可以使用以下代码来创建一个日期选择器： ```javascript $("#date").mobiscroll().date({ // Mobiscroll插件选项 }); ```...
jQuery Mobile开发中日期插件Mobiscroll使用说明
10-22
如果读者对Mobiscroll的使用有进一步的兴趣或需要解决特定的开发问题，可以访问Mobiscroll的官方网站进行深入学习和探索。通过官方文档，开发者能够发现更多的配置选项和高级功能，以实现更加个性化和专业的移动应用...
解决ionic中运用mobiscroll插件输入框内容重置的实现--clear()
zuo-yiran的博客
02-17 1981
有时在同一个页面会需要使用多个mobiscroll的控件，例如： 操作过程中，在进行选择之后，如图： 可能需要重置恢复到原本的页面： 常常需要添加一个“重置”的功能。 这个功能如何实现，其实很简单，只需一个clear()方法即可。 具体操作为： 在标签里面写上mobiscroll-instanc属性，在所需的按钮上添加点击事件 ng-click=”demoType.clear();
mobiscroll 只有时间和select两种
11-20
只需要2分，远离10分8分 含简单demo 另附插件名称： layer.m（弹窗） jquery.jscroll(滚动加载) 自己去网上下载
mobiscroll控件学习
aiyishengyishi的专栏
11-29 1111
由于最近项目需要（产品提出用h5模拟客户端实现选择时间的功能），经同事的推荐，看到了一款插件比较适合使用--mobiscroll 英文版使用说明链接如下：https://docs.mobiscroll.com/3-0-0_beta6/jquery/datetime#methods   我在开发中一共用到了两个功能，一个是时间的选择，一个是自定义选择，实现效果如下图：
jQuery 移动端触屏滑动日期控件(mobiscroll) 简单配置 谁用谁知道 ^_^
tanqingfu1的博客
03-22 2909
1:插件生成的来源 在很多页面和web应用中都有输入日期和时间的地方，我们知道HTML5提供一个input的date属性，对的就是时间选择。但是原始 时间选择是不太好看的。所以就有了找到相关的插件封装。 2：HTML5原始官方的date说明 Input Date 对象 Input Date 对象是 HTML5 中的新对象。 Input Date 对象表示 HTML <in...
mobiscroll插件（设置时间范围）
weixin_42526326的博客
07-28 1235
了解插件最好的方式就是去他的后宫 Let’s go! 1.主要问题：解决插件选择月份时默认只能选择当前月+1之前的月份 需求：我们需要的只是月份 解决方案：日期显示格式dataFormat : 'mm' 、日期排列格式 dataOrder : 'mm' 、设定时间显示范围 min/maxDate 代码实现： function initcustomerindex(){ //日期控件，增加确认事件 setTimeout(function(){ var y = (n
mobiscroll 时间选择器小结
集腋成裘
09-26 3796
mobiscroll 时间选择器小结mobiscroll 简介mobiscroll 是一系列的 UI 控件集合，其面向网页与移动开发者，以将开发人员从繁琐枯燥的 UI 控件编码工作中解放出来，而将更多的精力投入业务及其他需求的编码实现中去。
datetimepicker、mobiscroll日期插件使用demo
JerryHu94的博客
09-29 1446
倒腾了几天，觉得datetimepicker、mobiscroll这两个插件比较好一点，功能比较强大、简单、实用，写了两个demo贴出了，以后好看和供大家参考，也请前辈们不要耻笑、多多指定，就不说废话了，直接看图贴代码 datetimepicker插件使用demo <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" co
mobiscroll的具体用法
热门推荐
Sheri_stx的博客
06-07 6万+
mobiscroll是个很好用的jquery日期插件，它可以实现在移动端滚动选择日期。下面来介绍最常见的日期选择使用方式： 当然，你得首先引入css和js文件，我使用的是mobiscroll.custom-2.17.0.min.css和mobiscroll.custom-2.17.0.min.js, html代码: Clear Showjquery代码: $(function () {
mobiscroll 2.17 使用方法
最新发布
10-02
Mobiscroll 2.17 是一款功能强大的移动端插件，可以实现各种移动端界面的滑动选择和日期选择等功能。下面是Mobiscroll 2.17 的使用方法： 1. 首先，在你的HTML页面中引入Mobiscroll的核心文件，可以通过CDN获取或者下载到本地并引入。 2. 确保你的HTML页面中包含事先定义好的元素，例如一个文本输入框或一个div容器，用于显示Mobiscroll组件。 3. 在你的JavaScript代码中初始化Mobiscroll组件。你需要指定组件的类型，例如日期选择，时间选择或者滑动选择器。同时，你可以设置其他选项，例如显示的日期范围、默认选中值、是否显示非工作日等。 4. 如果需要处理组件的值改变事件，你可以为组件绑定onSelect或onChange等事件，以便在用户选择或值改变时执行相应的操作。 总之，使用Mobiscroll 2.17 首先需要引入其核心文件，在HTML中定义相应的元素，然后在JavaScript中初始化和配置Mobiscroll组件，最后可以通过事件来处理用户的选择和值改变。通过这些简单的步骤，你就可以在移动端实现各种强大的界面选择功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值