手机触摸板 日期选择控件整理

原创 2014年10月22日 15:19:31

1:首先引用js文件:

 <!--时间控件样式-->
    <link rel="stylesheet" type="text/css" href="~/Theme/css/mobiscroll.custom-2.13.2.min.css">
  <!--时间控件mobiscroll-->
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>


    <link href="~/Theme/plugins/mobiscroll/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
    <link href="~/Theme/plugins/mobiscroll/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

   //选择时间
        function selectDatetime() {
            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', //日期选择模式
                lang: 'zh',
                startYear: currYear - 10, //开始年份
                endYear: currYear + 10 //结束年份
            };

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


2:前台html代码:

<input type="text" id="ApptDate" />

效果图:


android和iphone显示的是不一样的效果

css和js地址:百度盘点击下载

大家觉得好就给一个回复吧!谢谢!

前端开发之日期控件、HTML5日期输入类型(date)

在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站。 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是...
  • chenchaofuck1
  • chenchaofuck1
  • 2016年06月26日 21:20
  • 40197

H5日期选择控件demo

  • 2017年09月14日 14:57
  • 53KB
  • 下载

一款不错的JS日期插件 Mobiscroll

演示地址 http://www.wglong.com/index/demos/mobiscroll/sample_zh.html
  • qzmrock
  • qzmrock
  • 2015年08月03日 11:14
  • 20150

H5 移动端 时间选择器

移动端 时间选择器
  • tdjqqq
  • tdjqqq
  • 2016年08月30日 16:42
  • 3092

H5移动端出生日期插件

现在需要在微信公众号H5页面添加出生日期,如果直接用电脑版的出生日期插件,会显得很土,而且不好用。在网上找了些资料写了个demo,把demo分享给大家。具体效果截图如下: 实现代码如下:...
  • zl544434558
  • zl544434558
  • 2015年11月27日 16:59
  • 7505

HTML5新控件 - 日期和时间选择输入

HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。1,日期...
  • u014063717
  • u014063717
  • 2016年03月17日 15:51
  • 93548

手机wap版日期输入框

  • 2015年09月06日 16:41
  • 88KB
  • 下载

移动端自适应手机屏幕网页代码+jqueryMobile日期选择插件

  • 2015年07月02日 17:21
  • 339KB
  • 下载

jquery实现手机端滑动选择日期控件

最近在做手机端网页,需要选择日期控件,找到几个使用iscroll或者mobiscroll实现的日期插件,但是文件都太大,所以自己用jquery实现一个,基本可用,只有单个js文件,仅9kb,使用时只需...
  • qf0129
  • qf0129
  • 2016年12月29日 17:51
  • 5180

自己动手丰衣足食之移动端日期选择插件(强烈推荐)

移动端的日期选择插件相比PC端比较少,主要原因是不同手机浏览器的效果不一样,mobiscroll 太臃肿了,而且不是免费的在此向大家分享一款手机端的日期选择插件https://github.com...
  • cometwo
  • cometwo
  • 2016年02月20日 20:38
  • 40531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机触摸板 日期选择控件整理
举报原因:
原因补充:

(最多只允许输入30个字)