专栏首页编程微刊jDate移动端用法

jDate移动端用法

前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与pc端类似;

参考demo

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="history.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="form-group clearfix" id="date">
                <div class="col-xs-6">
                    <input class="form-control" type="text" id="beginTime" placeholder="开始时间">
                </div>
                <div class="col-xs-6">
                    <input class="form-control" type="text" id="endTime" placeholder="结束时间">
                </div>
            </div>          
        </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            window.onload = function() {
                new Jdate({
                    el: '#beginTime',
                    format: 'YYYY-MM-DD',
                    beginYear: 2000,
                    endYear: 2100
                })
                new Jdate({
                    el: '#endTime',
                    format: 'YYYY-MM-DD hh:mm',
                    beginYear: 2000,
                    endYear: 2100
                })

            }
        </script>
        <script type="text/javascript" src="jdate.min.js"></script>
    </body>
</html>

效果如下

附上github地址: https://github.com/wangxiaoting666/history_date

附:pc端相关文章 jeDate日期控件的使用以及选中后点确定按钮关闭功能 https://www.jianshu.com/p/393d9e992144

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    祈澈菇凉
  • jquery实现下拉框选中对应的div

    这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应...

    祈澈菇凉
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    祈澈菇凉
  • jQuery

    jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifen...

    coders
  • ACCESS数据库基本使用

    用户1112962
  • css position:static 的使用

    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次...

    tianyawhl
  • Vue官方文档笔记

    当一个Vue实例(如上面的vm)被创建后,它将data对象里面的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”, 即视图展示...

    tandaxia
  • v­bind以及class与style的绑定-vue笔记4

    在数据绑定中,最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动 态绑定

    bamboo
  • CSS入门12-浮动与清除浮动

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 讲一下怎么区分伪类、伪元素,同时优雅的处理页面浮动的问题

    首先介绍一下什么是伪类:伪类其实我们经常用的到,只是我们自己不会刻意的说这个是伪类这样的一个东西,我下面简单的举个例子就明白了怎么回事

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券