精华内容
下载资源
问答
  • vue 时间控件

    2021-01-21 16:41:04
    1、项目开发中在使用日期时间选择器时需要添加默认时间并精确到HH:mm:ss,默认时间为当天的00:00:00~23:59:59 日期选择器相关属性 <el-date-picker v-model="serachForm.gengerateTime" type="datetimerange...

    1、项目开发中在使用日期时间选择器时需要添加默认时间并精确到HH:mm:ss,默认时间为当天的00:00:00~23:59:59
    日期选择器相关属性

    <el-date-picker
       v-model="serachForm.gengerateTime"
       type="datetimerange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       format="yyyy-MM-dd" //展示时间格式
       value-format="yyyy-MM-dd HH:mm:ss" //实际存放时间格式
       :default-time="['00:00:00', '23:59:59']" //日期选择时间段的跨度
       format="yyyy-MM-dd HH:mm:ss"
     >
     </el-date-picker>
    

     

    展开全文
  • ant-design-vue框架中时间控件dataPicker默认初始值为当天,有两种书写方式 1、created钩子中初始值赋值,注意:只有在created钩子中赋初始值才能实现, created () { this.form.getFieldDecorator('...

    ant-design-vue框架中时间控件dataPicker默认初始值为当天,有两种书写方式

    1、created钩子中初始值赋值,注意:只有在created钩子中赋初始值才能实现,

    created () {
        this.form.getFieldDecorator('discloseDate', { initialValue: moment(new Date()) })
      },

    2、直接在DOM中赋初始值:

    <a-form-item label="披露日期">
         <a-date-picker
            v-decorator="['discloseDate', { initialValue: moment(new Date()), rules: [{ required: true, message: '请选择披露日期!' }] }]"
            style="width: 100%"
            format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
    </a-form-item>
    
    

    注意:此时需要在methods中引入moment,否则会报错

     methods: {
        moment,
        disabledDate (current) {
          const currentMonth = moment().get('month') - 1
          const currentYear = moment().get('month') === 0 ? moment().get('year') - 1 : moment().get('year')
          const monthStart = moment().set({ 'year': currentYear, 'month': currentMonth, 'date': 0 })
          return current < monthStart || current > moment().endOf('day')
        },
     }

    涉及另外一个知识点,是时间控件只有当天和上个月一号之间的时间是可选的

    主要用的是disabledDate方法来实现的

    展开全文
  • input的时间控件有三种类型 属性AndroidIOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime" 调不出来 调不出来 type="datetime-local" 年+月+日+时+分(原生UI) 月+...

    input的时间控件有三种类型

    属性AndroidIOS
    type="date"年+月+日(原生UI样式)年+月+日(滚轮样式)
    type="datetime"调不出来调不出来
    type="datetime-local"年+月+日+时+分(原生UI)月+日++时+分(滚轮样式)

    Android和IOS各有一套自家的UI风格交互设计,包括weui部分交互样式都针对android和ios分别设计了两套交互风格,但是俺家的UI狗是个苹果派,一切交互样式向苹果看齐,安卓的交互用户体验实在太差,对!确实!没错!我完全认同UI的观点(这句是大实话),google的android交互师肯定都是实习生,腾讯的weui设计师肯定都是临时工!

    并且,系统自带时间控件还有一个缺点,就是默认时间只能从当天当时当分当秒开始(即使你给他强制赋值,他也不理你),如果你家的产品狗或者UI狗强迫让你必须默认打开是“2008年08月08日08时08分08秒”,那么这个时候,你只有两种选择,要么伸手拿起你主机箱上放了很久的杀猪刀,来一个屠暴起断其股,要么就去京东上买一瓶霸王来呵护一下你美丽的锈发了。相信懦弱的你肯定会选择后者(没错,我也一样 !)

    废话扯得太多,好了,蜂鸟达达马上给您送上干货。

    为了找一个类似IOS滚轮的时间控件样式,真的是煞费苦心,翻阅了github的Vue相关开源项目库汇总(url:/opendigg/awesome-github-vue[火车头自己补全]),没有一个能满足UI需求的。然后又去github搜date、time、picker。还有手动修改weuiJs的picker,但是最多三列,date+time就得分两次弹,折腾半天,最后,食之无味,弃之可惜。

    最后,还是import {Datetime} from 'vux'吧,它是最接近ios滚轮样式了,但是美中不足,滚轮中缺少星期几,这一点可绝对不能少。


    1. 修改文件
      node_modules\vux\src\components\datetime\datetimepicker.js
    2. 添加变量(在文件中随便找个位置,下文能调到就可以了)
      const jim = {
        currentYear: NOW.getFullYear(),
        currentMonth: NOW.getMonth() + 1,    
      }
    3. 找到:_setDayScroller (year, month, day),获取改变后的年月,用于计算星期,添加代码:
      {// 添加星期begin
              jim.currentYear = year;
              jim.currentMonth = month;
      }// 添加星期end
    4. 找到:_makeData (type, year, month),修改循环输出,修改代码为:
      for (let i = min; i <= max; i++) {
        let name
        if (type === 'year') {
          name = parseRow(config.yearRow, i)
        } else {
          const val = valueMap[list[0]] ? addZero(i) : i
          if(type === 'day'){// 添加星期begin
              let isIos = (/mmp|iphone|ipad|ipod\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if(isIos){
                let week = new Date(jim.currentYear+'/'+jim.currentMonth+'/'+val).getDay();
                name = parseRow(config[type + 'Row'], val) + " 周"+['日','一','二','三','四','五','六'][week];
              }else{
                let week = new Date(jim.currentYear+'-'+jim.currentMonth+'-'+val).getDay();
                name = parseRow(config[type + 'Row'], val) + " 周"+['日','一','二','三','四','五','六'][week];
              }
          }else{
              name = parseRow(config[type + 'Row'], val)
          }
          // console.log(jim.currentYear,jim.currentMonth,type,val,name)
        }
        data.push({
          name: name,
          value: i
        })
      }这就是最终效果,其实变化不大,就是多加了一列周几而已

    这是修改后的datetimepicker.js,直接覆盖源文件也可以:datetimepicker


     

    转载于:https://www.cnblogs.com/lvjiangmin/p/7268579.html

    展开全文
  • 项目中需要用到日期时间插件,尝试用bootstrap、element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊。终于,最后用了layDate实现了需要的功能最终效果: 使用步骤:1.下载js包2.将laydate文件夹放在...

    项目中需要用到日期时间插件,尝试用bootstrap、element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊。终于,最后用了layDate实现了需要的功能

    最终效果:

    08fb965fdb4677e2c9d7f3cef1b071a9.png

    使用步骤:

    1.下载js包

    2.将laydate文件夹放在根目录的static下

    a3e5838429c48a0eadf4ca8dbd30c263.png

    3.在index.html中引入

    04f4a5f239cba9d3232158d89aecae00.gif

    1

    2

    3

    4

    5

    6

    XXX

    7

    8

    9

    10

    11

    12

    13

    acbd15afe5e4479d93625c25718a90b5.gif

    4.定义时间日期组件

    8585b4a8ba3eaaebac51da051096a324.gif

    export default {

    name: "myTime",

    data() {

    return {

    date: ""// 存储选择的日期

    };

    },

    mounted() {

    // 使用:执行一个laydate实例

    laydate.render({

    elem: "#orderTime", // 指定元素

    type: "datetime", // 组件的类型:year,month,time···

    format: 'yyyy-MM-dd HH:mm'// 设置显示格式

    done: value => { // 点击确认执行的回调函数,会把当前选择的时间传入进来

    // 把选择的时间赋值给先前定义好的变量,显示在页面

    this.date = value;

    }

    });

    }

    };

    .hello {

    display: inline-block;

    }

    .hello input {

    margin-left: -4px;

    width: 300px;

    height: 40px;

    border-radius: 4px;

    border: 1px solid #DCDFE6;

    }

    .layui-laydate .layui-this {

    background-color: #358ee7 !important;

    }

    cedcc46e5ccf0b4e22e9af11e47fb9ac.gif

    5.引用组件

    体检日期:

    展开全文
  • vue-时间控件以及时间控件校验

    千次阅读 2020-07-20 17:22:25
    :model 数据区域 :rules 规则校验 <el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%"> 1.同时出现两个日期选择列表 <el-form-item label="止期" prop="endTime">...
  • vue时间选择控件的使用

    万次阅读 热门讨论 2019-06-28 14:22:32
    使用场景: 第一步:将js导入到项目文件夹中 ...第二步:在route文件夹的index.js中引用js文件 ...第三步:调用js方法,弹出时间选择器 HTML: <input class="js-date-picker" type="text" ...
  • <template> <div class="LoginClock"> <div class="time">{{time}}</div> <div class="date">{{date}}</div> </div> </template>
  • 手写vue日历控件过程

    千次阅读 2019-02-11 21:23:22
    之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断。   设计(以最常用的按...
  • 之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断。  设计(以最常用的按...
  • VUE DatePicker控件 禁用自定义日期 <el-form-item label="开始日期:" :label-width="formLabelWidth" prop="planDate"> <el-date-picker size="mini" v-model="form.planDate" type="date" style=...
  • Ant Vue表单控件的联动校验需求逻辑实现多说一句 需求 最近想在表单里面实现一个可以联动校验的日期选择框,但是查找了好多博客,没有发现符合的描述,大概是我的需求太简单了,大佬都不屑于记录,本文用于我自己的...
  • vue日期控件的坑

    2020-07-14 14:46:03
    el-date-picker控件默认情况下传递给后端的日期比选择的日期少一天,需要加上属性value-format="yyyy-MM-dd"才能保证日期传递的正确
  • 今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助!HTML文件<el-date-picker v-model="value" ...
  • 多功能版vue日历控件

    2018-06-29 10:56:00
    下载地址:... 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/p/8632396.html 具体用法:(基本用法请参考:https://www.cnblogs.com/mrzhu/p/8632396.html)   <zm-datepic...
  • vue+element 时间控件-时间格式转换

    千次阅读 2019-03-27 16:42:05
    vue +element 时间控件-时间格式转换 放到js文件中 用法:formatDate(new Date(), “yyyy-MM-dd hh:mm:ss”) 结果:2019-03-27 16:40:36 export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt =...
  • vue 试卷控件 界面模式

    千次阅读 热门讨论 2020-01-10 15:42:48
    examDuration: 90, //交卷时间 submissionTime: '2019-11-25 16:30:26', //题目集合 list:[ { //题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题 type:2, no:1, subject:'以下属于南方电网员工职业操守中...
  • vue控件添加,删除

    2019-10-30 17:28:48
    "请选择时间单位" > < el - option label = "秒" value = 1 > < / el - option > < el - option label = "分" value = 2 > < / el - option > < el - option label = "时" value = 3 > < / el - option ...
  • vue ,做一个新功能的时候,用element-ui的diolag作为一个弹出层,用于数据的新增以及修改,diolag中用了el-date-picker日期控件,首次选择新增完成后,不管是再次新增或者修改,重新选择日期回显都无法改变视图显示...
  • //考试时长 examDuration: 90, //交卷时间 submissionTime: '2019-11-25 16:30:26', //题目集合 list:[ { //题目类型 1.单选题 2.多选题 3.判断题 4.填空题 5.简答题 type:2, no:1, subject:'以下属于南方电网员工...
  • Layui+vue 日期控件初始化日期绑定问题 问题说明: <div class="layui-inline layui-col-md6 layui-col-sm6 layui-col-xs6"> <label class="layui-form-label"><span style="color: red">*<...
  • vue+elementUi时间控件

    千次阅读 2017-10-30 09:23:52
    jsp: 引用: link rel="stylesheet" href="path%>element/css/index.css">  script type="text/javascript" ...src="path%>/vuejs/vue.js">script>  script type="text/javascript
  • 1、 <el-form :inline="true" class="demo-form-inline padding-top-20"> <el-form-item label="年份"> <div class="block"> <el-date-picker v-model="searchYear" type="daterange" align=...
  • 首先去下载laydate时间控件,引入到相应的模板中<input type="text" val-required="" value="" date-laydate="" id="estab_dateA" class="initial_date laydate-icon" @click="dateBlock('#estab_dateA')"> ...
  • 后入前的小白,百思不得其解好久,各种百度。 这位小姐姐总结的三种都试了不行,需要...然后用moment试了 moment(values.beginTime) 这种也不行,大佬指导和北京时间差8小时,下面这样写就OK了~~ 传值的时候用哦~ ...
  • 时间控件优化 elementUI 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前 <el-form-item label="起始时间:" class="sarch_form_item"> <el-date-picker v-model="formLabelAlign.dateStart...
  • 在动态添加时间控件或者下拉控件时要在触发回调函数中添加自己的标识或者其他参数, //item.name是传递到参数 data,dateString是插件自带参数 <a-range-picker @change="(data,dateString)=>{onChange(item....
  • vue 选择日期控件

    万次阅读 2018-08-21 13:38:10
    相关地址: https://www.npmjs.com/package/vue2-datepick ... 下载控件 vue2-datepick npm i vue2-datepick –save 2. 初始化 import Calendar from ‘vue2-datepick’; Vue.use(Calendar); 3. ...
  • 基于vue3+typescript 的日期时间控件,兼容web+mobile,感兴趣的私我哈

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,006
精华内容 3,602
关键字:

vue时间控件

vue 订阅