jquery mobile 日期插件使用

原创 2013年12月06日 12:31:18

昨天碰到使用日期 的应用,就开始百度 jquery mobile 日期插件

一般是使用 datebox 和 mobilescroll

昨天开始研究datebox,一直到今天上午才研究好,而且只研究了 日期控件,  日期带时间一起的好像没有。

没办法 就开始研究 mobiscroll

 

使用很方便,只需要引入2个文件 。

下面是 data 和 datatime 2种 控件的使用方法。

 

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <link href="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery.mobile-1.3.2/jquery.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

    <link href="../plug-data-scroll/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
    <script src="../plug-data-scroll/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

    <title>预警信息</title>
    <style type="text/css">

    </style>

    <script>
        var opt_data = {
            preset: 'date', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            // dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020, //结束年份
            showNow:true,
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };
    /*    var opt_datatime = {
            preset: 'datetime', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020 ,//结束年份
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };*/

        $(document).ready(function()
        {

            $("#mydate1").mobiscroll(opt_data);
            $("#mydate2").mobiscroll(opt_data);
           // $("#datatime1").mobiscroll(opt_datatime);
            $("#filter1").click(function()
            {
                alert($("#mydate2").val());
            });
        })
    </script>
</head>

<body>

<div data-role="page"   >

    <div data-role="header" data-position="fixed" data-theme="b">
       <a href="main.html" data-role="button" data-icon="back">返回</a>
        <h1>农田预警信息</h1>

    </div>
    <div data-role="content">


       <fieldset ><legend style="color: #006600">选择时间段</legend><hr>
       <input name="mydate" id="mydate1" type="text" data-role="datebox"   data-inline="true"  placeholder="开始时间" autofocus>
       <input name="mydate2" id="mydate2" type="text" data-role="datebox"   data-inline="true"  placeholder="结束时间" autofocus>
       </fieldset>

        <a href="#" data-role="button" id="filter1">查询</a>
     
        <ul  data-role="listview" data-inset="true"  data-count-theme="d">
            <li><a href="alter-detail-rain.html" data-transition="slidedown"  data-ajax='false' > 雨量预警 <span class="ui-li-count"  > 2 </span></a></li>

            <li><a href="mian.html" data-transition="slidedown"  data-ajax='false' > 河道水位预警 <span class="ui-li-count" > 2 </span></a> </li>

            <li><a href="chuancai.html"    data-transition="flip" > 水库水位预警 <span class="ui-li-count" > 5 </span></a> </li>

            <li><a href="xiangcai.html" data-transition="slidedown"  data-ajax='false' > 全部预警 <span class="ui-li-count" >9</span></a> </li>
        </ul>

 

    </div>

    <div align="center" data-role="footer" data-position="fixed"  data-theme="c" >
        <div data-role="navbar"  data-iconpos="top">
            <ul>
                <li><a href="main.html" data-icon="home"   >首页</a></li>
                <li><a href="NongTianInfo.html" data-icon="info">农田环境</a></li>
                <li><a href="alter.html"    data-icon="search" >预警查询</a></li>
                <li><a href="#" data-icon="send-msg">信息上报</a></li>

            </ul>
        </div>
    </div>

</div>


</body>
</html>

Mobiscroll — 配合jQuery Mobile 的日期选择控件附DEMO

$(function () {       var currYear = (new Date()).getFullYear();         var opt={};       opt.date ...
  • u010730458
  • u010730458
  • 2014年07月09日 17:15
  • 4675

jquery mobile datepicker

找jquery mobile的日期widget,意外之中找到了datepicker,看更新时间
  • laywl
  • laywl
  • 2014年05月22日 20:52
  • 1214

jquery mobile mobiscroll 日期插件使 用mobiscroll

jquery mobile mobiscroll 日期插件使 用mobiscroll 官网网站: http://www.mobiscroll.com/ ht...
  • xiqim
  • xiqim
  • 2016年02月23日 14:56
  • 8811

jQuery手机移动端日历日期选择

从jQuery中找到了一个不错的框架,可以介绍给大家,代码就直接粘贴了,不用下载了!~ ! html代码: jQuery手机移动端日历日期选择 $(...
  • xy_peng
  • xy_peng
  • 2016年12月05日 15:53
  • 5974

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

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

jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

因为做的项目需要,在我网上看到mobiscroll这个插件,然后各种找demo,最后自己研究一下,下面是就我自己项目上用到的进行分析;...
  • qq_36517520
  • qq_36517520
  • 2017年04月11日 14:48
  • 625

jquery mobile 日期插件使用

昨天碰到使用日期 的应用,就开始百度 jquery mobile 日期插件 一般是使用 datebox 和 mobilescroll 昨天开始研究datebox,一直到今天上午才研究好,而且只研究...
  • mfc2003
  • mfc2003
  • 2013年12月06日 12:31
  • 15790

jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.5 使用说明

在用jQuery Mobile 做手机网站、需要用日期控件 找了3个 分别展示下: 1.可以说是html5自己的 购买时间* 重点就是  in...
  • qq19124152
  • qq19124152
  • 2016年01月06日 15:49
  • 2394

推荐30个jQuery Mobile插件和教程

本文涉及的 jQuery Mobile 教程包括以下 5 大方面的内容: 1. jQuery Mobile Swipe 2. jQuery Mobile Gallery(移动相册) 3....
  • albert528108
  • albert528108
  • 2014年09月04日 23:16
  • 3303

jQuery Mobile 所有data-*选项,开发全解+完美注释

jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项jQuery Mobile 所有data-*选项:data-ro...
  • luanpeng825485697
  • luanpeng825485697
  • 2017年08月05日 15:39
  • 2026
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery mobile 日期插件使用
举报原因:
原因补充:

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