mint ui datetimepicker 手机端jquery datetimepicker 总结应用

对于手机端datetimepicker的使用 在使用minit ui 的datatimepicker的使用方法

首先它需要两个触发器 这里因为项目用到的是开始到结束的时间 我就点击的时候手动传入了一个参数

<input id=‘start‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘start‘ @click=‘openPicker("start")‘ v-model=‘startTime‘>
<input id=‘end‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘end‘ @click=‘openPicker("end")‘ v-model=‘endTime‘>

  然后在vue的methods中声明这个方法

openPicker(type) {
        this.type=type;
        this.$refs.picker.open();
      },

  这里我接受了 在点击的时候传递的参数用来判断我是点击的是开始还是结束,再点击确定以后会触发一个事件handleConfirm

handleConfirm(data) {
        let date = moment(data).format(‘YYYY-MM-DD‘);
        if(this.type==‘start‘){
          this.startTime = date;
        }
        if(this.type == ‘end‘){
          this.endTime = date;
        }
      }

  再点击确定以后我把点击的内容传递给input中  着里的时间必须要格式化一下 因为单位就让穿的格式就是YYYY-MM-DD 所以我们得把参数格式化下

这里推荐使用的是 moment.js

import moment from ‘moment‘

  对应的文档地址是 http://momentjs.cn/docs/ 这样就可以在我们事先的input标签中添加到我们想要的时间的参数了 补一下组件的选项

<mt-datetime-picker
      v-model="pickerVisible"
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate = ‘maxdata‘
      :endDate = ‘mindata‘
      >
    </mt-datetime-picker>

  对于不用vue的朋友 我推荐一款手机端做的非常好的jquery插件

  链接:https://pan.baidu.com/s/1pLyuN6F 密码:yoq5

  懂js得 进入date.js 就可以调整它的选项 类似minit ui的样式

时间: 2024-10-29 11:37:15

mint ui datetimepicker 手机端jquery datetimepicker 总结应用的相关文章

自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

jQuery手机端触摸卡片切换效果

效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: 1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=ed

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

jQuery,zepto手机端用on将子元素事件委托给body或document无效

jQuery,zepto手机端用on将子元素事件委托给body或document无效 在移动端,绑定在普通的div元素上是可以的,但是绑定在body上无效,document也是无效. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=d

jquery手机端带农历的万年历插件

简要教程 这是一款使用jquery结合swiper.js来制作的手机端带农历的万年历插件.该万年历类似百度的万年历,带有农历日期.用户可以通过类似iphone的滚轮来选择不同的的日期. 使用方法: 在页面中引入common.css.index.css和swiper-3.3.1.min.css样式文件,以及jquery.swiper-3.3.1.min.js.common.js文件. 下面是该手机端带农历的万年历插件的一些效果截图. 演示下载地址:http://www.datouwang.com/

用的较为舒服的时间插件jQuery DateTimePicker

做项目时候经常用用到前端时间插件,一般都会手上积累几套方案用作各种情况,但个别项目比较麻烦,深度使用下来还是https://github.com/xdan/datetimepicker 功能更加强大. 首先明确需求: 预约时间的选择: 日期必须今天(不能选今天)之后的7(这个数要能后台设定)天,双休日不能选,可以时间段由后台设定,如果有用户选择了某个时间段其他用户就不能再选. 方案1:用Vue.js写个控件,感觉比较费时间. 方案2:使用jQuery DateTimePicker var dat

每日技术总结:jquery datetimepicker,

前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepicker 配置参数 官方文档:DateTimePickerjQuery plugin select date and time (找了很久) 耗时2小时,翻了无数遍网页,最后亲自去看插件源码,突然灵光一现,发现只是input value的格式传错了,冤啊!! Html代码如下: <head> &l

jquery.datetimepicker 没有显示分钟问题

今天需要将某一个列表的搜索时间精确的分钟,由于使用的是jquery.datetimepicker.以前项目中都使用laydate,所以网上查找了一下需要设置什么参数. 看了好几个博客都不能满足我的要求 最终在文档中发现需要设置:step : 1 即可! 其他Js部分设置如下: jQuery.datetimepicker.setLocale('zh');jQuery('#date_start').datetimepicker({ datepicker : true, step : 1, start