精华内容
下载资源
问答
  • jdate
    千次阅读
    2019-11-25 01:04:20

    前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与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>
    

    效果如下


    5640239-b01d654ce219ed04.png

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

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

    更多相关内容
  • jdate时间插件

    2018-12-28 11:16:39
    这是一个js时间插件,界面美观,有良好的使用体验。。。
  • jdate转换器 一个简单的库,用于将Java日期和时间格式转换为JavaScript日期和时间格式(例如在moment.js中使用)。 基于: 用法 使用npm(或bower)安装,然后: var converter = require ( "jdate-converter" ) ...
  • jDate-master.zip,jDate-master,.eslintrc.json,.DS_Store,webpack.config.js,src,plugin,shiftkey.js,jDate.css,tools.js,i18n.js,material.js,index.js,.babelrc,demo,index.html,images,demo1.png,demo1.gif,...
  • JDate JavaScript中的Jalali到Gregorian转换器,支持格式化输出 安装 通过NPM / Yarn安装: npm install jalali-date 您可以从lib目录中获取最新版本并使用它: < head > < script src =" jdate.js " ...
  • 移动端时间控件jDate.rar,不用C币,直接下载。
  • 主要要引入两个js ...script src="~/Scripts/jquery-mui-jdate/jdate.min.js"></script> js下载地址: 然后就是代码部分 <script type="text/javascript"> $(function () { new Jda

    主要要引入两个js

    
    <script src="~/Scripts/jquery-mui-jdate/jquery.min.js"></script>
    <script src="~/Scripts/jquery-mui-jdate/jdate.min.js"></script>
    

    js下载地址:
    https://download.csdn.net/download/zhongaiyisheng_/20299134

    然后就是代码部分

    <script type="text/javascript">
        $(function () {
    
            new Jdate({
                el: '#StartDate',
                format: 'YYYY-MM-DD hh:mm:ss'
            });
    
            new Jdate({
                el: '#EndDate',
                format: 'YYYY-MM-DD hh:mm:ss'
            });
        });
    </script>
    
    
    <input type="text" id="StartDate" name="StartDate" placeholder="点击选择开始时间"/>
    
    

    效果:
    在这里插入图片描述
    官方示例:

    //完整参数、方法示例
    var jd = new Jdate({
        el: '#date',
        format: 'YYYY-MM-DD',
        beginYear: 2000,
        endYear: 2100,
        minStep:1,
        lang:{title:'自定义标题'},
        trigger:'tap',
        init: function() {
          console.log('插件开始触发');
        },
        moveEnd: function() {
          console.log('滚动结束');
        },
        confirm: function(date) {
          console.log('确定按钮触发');
        },
        cancel: function() {
          console.log('插件运行取消');
        }
    })
    jd.show();
    jd.hide();
    
    

    参数、方法说明:

    名称必填默认值说明
    el绑定插件的dom元素,插件内部使用document.querySelector,
    也可以直接传递dom元素对象,只支持单个
    format‘YYYY-MM-DD’日期格式,无限制。规则:年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔,可随意组合
    beginYear2000日期开始年份
    endYear2100日期结束年份
    value日期初始化的默认值,列如’2018-03-18’
    lang年、月、日…配置插件语言,默认:title:‘选择日期’,cancel:‘取消’,confirm:‘确认’,
    year:‘年’,month:‘月’,day:‘日’,hour:‘时’,min:‘分’,sec:‘秒’
    minStep1分钟按指定数分隔
    initnull插件触发前的回调函数,return false可阻止插件执行
    moveEndnull插件滚动后的回调函数
    confirmnull确认按钮触发前的回调函数,return false可阻止插件执行,
    return其他值可修改日期,函数返回一个参数(选中的日期)
    cancelnull插件取消时触发的回调函数
    trigger‘tap’默认使用tap解决移动端click事件300ms延迟,可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发
    show主动触发插件,当trigger为tap时,主动触发插件应该使用此方法
    hide主动隐藏插件
    展开全文
  • Laravel开发-jdate

    2019-08-28 10:49:54
    Laravel开发-jdate 从贾拉利到格鲁吉亚的日期转换器,反之亦然。里面有碳元素,对拉拉维尔很友好。
  • 一、控件说明 jdate(jquery-date) 注:当前控件兼容支持手机浏览器,常用选择即可支持。 git源代码地址: https://github.com/weijhfly/jqueryDatePlugin 如果是在vue或其他模块开发的项目中,参考git中的使用...

    一、控件说明 jdate(jquery-date)

    注:当前控件兼容支持手机浏览器,常用选择即可支持。

    git源代码地址:

    https://github.com/weijhfly/jqueryDatePlugin

    如果是在vue或其他模块开发的项目中,参考git中的使用说明。

    在html中使用,比较简单,引用jquery控件后,再引用jdate控件

      <script src="/scripts/plugins/jdate.min.js"></script>

    使用使用方法很简单:

        var jd = new Jdate({
                el: '#dateOne',
                format: 'YYYY-MM-DD',
            });

    使用效果:

     

    二、使用示例

    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">日期</label>
            <input type="text" class="form-control" id="dateOne" placeholder="请选择日期" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">日期格式:yyyy-MM-dd</small>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    <script>
        var jd = new Jdate({
            el: '#dateOne',
            format: 'YYYY-MM-DD',
        });
    </script>

    官方示例:

    //完整参数、方法示例
    var jd = new Jdate({
        el: '#date',
        format: 'YYYY-MM-DD',
        beginYear: 2000,
        endYear: 2100,
        minStep:1,
        lang:{title:'自定义标题'},
        trigger:'tap',
        init: function() {
          console.log('插件开始触发');
        },
        moveEnd: function() {
          console.log('滚动结束');
        },
        confirm: function(date) {
          console.log('确定按钮触发');
        },
        cancel: function() {
          console.log('插件运行取消');
        }
    })
    jd.show();
    jd.hide();

     

    参数、方法说明

    名称必填默认值说明
    el绑定插件的dom元素,插件内部使用document.querySelector,
    也可以直接传递dom元素对象,只支持单个
    format'YYYY-MM-DD'日期格式,无限制。规则:年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔,可随意组合
    beginYear2000日期开始年份
    endYear2100日期结束年份
    value日期初始化的默认值,列如'2018-03-18'
    lang年、月、日...配置插件语言,默认:title:'选择日期',cancel:'取消',confirm:'确认',
    year:'年',month:'月',day:'日',hour:'时',min:'分',sec:'秒'
    minStep1分钟按指定数分隔
    initnull插件触发前的回调函数,return false可阻止插件执行
    moveEndnull插件滚动后的回调函数
    confirmnull确认按钮触发前的回调函数,return false可阻止插件执行,
    return其他值可修改日期,函数返回一个参数(选中的日期)
    cancelnull插件取消时触发的回调函数
    trigger'tap'默认使用tap解决移动端click事件300ms延迟,可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发
    show主动触发插件,当trigger为tap时,主动触发插件应该使用此方法
    hide主动隐藏插件

     

    更多:

    Bootstrap3 datetimepicker控件的使用

    Bootstrap Table使用整理(六)-常用操作

    Bootstrap相关整理、免费主题整理

     

    展开全文
  • 移动端Jdate时间控件禁止弹出软键盘 使用jdate时间控件来制作移动端时,点击上方的物品栏填写内容,光标将停留在物品栏,填写完毕选择时间时,光标还是停留在物品栏,虽然不影响选择的时间依旧是显示在时间栏,但是...

    移动端Jdate时间控件禁止弹出软键盘

    使用jdate时间控件来制作移动端时,点击上方的物品栏填写内容,光标将停留在物品栏,填写完毕选择时间时,光标还是停留在物品栏,虽然不影响选择的时间依旧是显示在时间栏,但是光标一直停留在物品输入框,会触发手机软键盘,选择时间的时候影响用户体验。如下图显示,很不友好。

    在这里插入图片描述

    这边我们需要了解jdate时间控件是怎么编写的,下面附上完整参数,方法实例的代码图片

    在这里插入图片描述

    这样的话,思路就清晰了,只需要在init:function(){}中给物品栏添加选择时间,物品栏失去焦点事件即可!

        var jd = new Jdate({
            el: '#goout_starttime',
            format: 'YYYY-MM-DD hh:mm:ss',
            init:function () {
                $('#goout_goods').blur();//物品栏失去焦点
            }
        });
    
    展开全文
  • 新版的JDate其实是PHP5内置日期类DateTime的扩展类,所以继承所有DateTime的方法,即可以把JDate当DateTime类来使用。 得到当前时间: $now = JFactory::getDate(); 从客户端录入的日期字串转化为JDate对象: $config...
  • JDate类与JString类一样是Joomla!中的基础类,Joomla! core中的大部分日期都用到了相关的函数。JDate的构造函数有两个参数,一个是$date,一个是$tzOffset,前者是时间,默认是当前值,$date可以有三种形式,RFC 82
  • jQueryDate.zip

    2021-05-08 14:58:46
    此插件依赖jquery,此为jdate 2.0新版,拥有和rolldate完全一样的功能,体积更小,兼容性更强,且是为移动端而写,也支持pc端的使用,支持年月、年月日、年月日时分、年月日时分秒,时间限制limitTime参数目前只做了...
  • 日期插件 jquery-date.js

    2018-08-30 16:22:47
    支持H5的日期控件 PC及移动端都可以使用,支持年月日、年月日时间、时间、多种格式!
  • JeecgBoot实战—前端Ant-Design-Vue专题

    千次阅读 2022-02-19 20:27:10
    -- 局部组件引入JDate--> import JDate from '@/components/jeecg/JDate' export default { name: 'List', components:{ JDate }, data(){ return{ dateStr:null } } } script> <style scoped> style> 全局使用j-...
  • javascript 日期时间 转换的方法,需要的朋友可以参考一下
  • 新版的JDate其实是PHP5内置日期类DateTime的扩展类,所以继承所有DateTime的方法,即可以把JDate当DateTime类来使用。 以下是得到前天的零时例子(PHP > 5.3.0): $config = JFactory::getConfig(); // ...
  • JDateButton是一个Java日期选择实用程序,用于以图形方式选择日期。 它利用一个按钮显示日期,按下该按钮将弹出一个“日历”对话框以选择日期。 还包括表渲染器和编辑器版本。 对话框可以选择的日期范围以及语言环境...
  • 该项目现在位于:https://github.com/JDatePicker/JDatePicker将使该sf.net项目保持活动状态,以指向github。 JDatePicker和JDatePanel是Java Swing应用程序的一组高级DatePicker控件。 MVC设计使我们能够显示任何...
  • jeecg问题汇总

    2021-08-24 14:24:11
    MM" :value="value" :mode="mode" @panelChange="handleChange" @change="handleChange" /> div> a-form-item> a-col> a-row> a-form> div> a-card> template> <script> // 引入日期组件 import JDate from '@/...
  • 非常强大的时间日期插件 --- JeDate.js

    千次阅读 2022-04-21 16:52:35
    非常强大的时间日期插件,整合到自己的html或者vue,react中,炫酷。
  • js——Date对象

    2022-04-25 14:39:28
    一、Date Date:对象用于处理日期和时间 //当前时间点 let oDate = new Date(); //表示构建一个指定时间对象(格式必须是字符串的类型。...let oDate = new Date("4 24,2022,14:58:12");...let oDate = new Date('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 797
精华内容 318
关键字:

jdate