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

    千次阅读 2018-04-12 16:32:42
  • vue时间插件 中datepicker.js 修改过支持年,年月,年月日的选择
  • vue 时间插件限制选择时间

    万次阅读 2020-02-22 16:42:03
    el-date-picker设置日期选择范围 这个场景是在一个页面中有两个日期选择框,其中一个的日期只能在另一个的范围内进行选择,贴代码: template: <el-date-picker v-model="electricity" type="daterange" align...

    el-date-picker设置日期选择范围
    这个场景是在一个页面中有两个日期选择框,其中一个的日期只能在另一个的范围内进行选择,贴代码:

    template:

    <el-date-picker v-model="electricity" type="daterange" align="right" unlink-panels :disabled="electricityShow" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker>

    以上重点是绑定picker-options: :picker-options="pickerOptions" 

     

    script:

    data() {

        var self = this;

        return {

            pickerOptions: {

                disabledDate: time => {

                    return (

                        time < new Date(this.form.cooperationBegin + " 00:00:00") ||

                        time > new Date(this.form.cooperationEnd + " 00:00:00")

                    );

                }

            },

        }

    其中cooperationBegin和cooperationEnd是time可选的日期范围,为另一个日期选择器选中的动态数据

    展开全文
  • 原文链接:... 安装 npm i vue-calendar-component --save template部分 <Calendar v-on:choseDay=“clickDay” v-on:changeMonth=“changeDate” // v-on:isToday=“clickToday” ...

    原文链接:https://www.3mooc.com/front/articleinfo/187

    1. 安装

    npm i vue-calendar-component --save

    1. template部分

    <Calendar

    v-on:choseDay=“clickDay”

    v-on:changeMonth=“changeDate”

    // v-on:isToday=“clickToday”

    // :markDate=arr // arr=[‘2018/4/1’,‘2018/4/3’] 标记4月1日和4月3日 简单标记

    // :markDateMore=arr // 多种不同的标记

    // 第一个标记和第二个标记不能同时使用

    // :agoDayHide=‘1514937600’ //某个日期以前的不允许点击 时间戳10位

    // :futureDayHide=‘1525104000’ //某个日期以后的不允许点击 时间戳10位

    // :sundayStart=“true” //默认是周一开始 当是true的时候 是周日开始

    3.JavaScript部分

    import Calendar from ‘vue-calendar-component’;

    export default {

    components: {

    Calendar
    

    },

    methods: {
    
        clickDay(data) {
    
      console.log(data); //选中某天
    
    },
    
    changeDate(data) {
    
      console.log(data); //左右点击切换月份
    
    },
    
    clickToday(data) {
    
      console.log(data); // 跳到了本月
    
    }
    

    }

    }

    API

    属性说明默认是否必传

    choseDay选中某天调用的方法,返回选中的日期 YY-MM-DD无否

    changeMonth切换月份调用的方法,返回切换到某月的日期 YY-MM-DD无否

    isToday切换月份的时候,如果切到当前月份,调用这个方法,返回当前月今天无否

    markDate如果需要某月的几天被标注,传当月的日期数组。如[“2018/2/2”,“2018/2/6”]被会标注(相同的标记)空数组否

    markDateMore需要不同的标记如上Usage 最后一行示例代码空数组否

    agoDayHide某个日期以前的不允许点击 时间戳长度是 10 位0否

    futureDayHide某个日期以后的不允许点击 时间戳长度是 10 位很大否

    sundayStart默认是周一开始 当是true的时候 是周日开始false否

    textTop日历头部的文字,默认是 [ ‘日’,‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’] ,可以根据自己的需求进行不同的修改。—否

    展开全文
  • vue库存时间插件

    2017-08-04 18:02:49
    vue 时间插件
  • vue 移动时间插件 vue2-对话框 (vue2-dialog) This plugin is just only adapted for mobile. 该插件仅适用于移动设备。 You can use it to make several kinds of dialog components such as Alert,Confirm,...

    vue 移动时间插件

    vue2-对话框 (vue2-dialog)

    This plugin is just only adapted for mobile.

    该插件仅适用于移动设备。

    You can use it to make several kinds of dialog components such as Alert,Confirm,ActionSheet,Toast.And you can also use the components like AddressPicker,Loading and Scroller

    您可以使用它来制作多种对话框组件,例如Alert,Confirm,ActionSheet,Toast。还可以使用诸如AddressPicker,Loading和Scroller之类的组件。

    vue2-dialog

    如何使用 (How to use)

    • NPM install the vue2-dialog plugin

      NPM安装vue2-dialog插件

    npm install vue2-dialog --save

    1.vue水疗 (1.vue spa)

    • import the plugin and use (global use)

      导入插件并使用(全局使用)

    import {VueDialog} from 'vue2-dialog'
    Vue.use(VueDialog)
    • import some components that you need and use (local use)

      导入您需要和使用的某些组件(本地使用)

    import {Scroller,Alert,Confirm} from 'vue2-dialog'
    Vue.component(Scroller.name,Scroller)
    Vue.component(Alert.name,Alert)
    Vue.component(Confirm.name,Confirm)

    2.脚本HTML (2.script html)

    • directly write the script,in deed you have to insert the vue.js script firstly

      直接编写脚本,实际上必须先insert the vue.js脚本

    <script src="dist/vue2-dialog.js"></script>
    • use the components directly in your vue spa file or the Vue instance ,like

      直接在vue spa文件或Vue实例中使用组件,例如

    <Alert />
    <Confirm />
    <Toast />
    <Scroller />
    ...

    选件 (Options)

    1.警报 (1. Alert)

    道具 (props)

    alert [Object]

    警报 [Object]

    key value description
    title [String] or [HTML Tag] title of the alert
    content [String] or [HTML Tag] content of the alert
    alertBtn [String] alertBtn of the alert
    isShow [Boolean] whether show the alert
    描述
    标题 [String][HTML Tag] 警报标题
    内容 [String][HTML Tag] 警报内容
    AlertBtn [String] AlertBtn的警报
    isShow [Boolean] 是否显示警报

    closeOnClickModal [Boolean]

    closeOnClickModal [Boolean]

    prop name description required default
    closeOnClickModal [Boolean]whether close alert by clicking the mask modal No false
    道具名称 描述 需要 默认
    closeOnClickModal [Boolean]是否通过单击遮罩模态来关闭警报 没有

    发出事件 (emit events)

    • ok when you click the alertBtn,the component will close.

      ok当您单击alertBtn时,该组件将关闭。

    演示代码 (DEMO Codes)

    //template
    <Alert :alert="alert" :closeOnClickModal="true" @ok="ok" />
    
    //script
    export default {
    	data(){
    		return{
    			alert:{
    				title:'tip',
    				content:'Hello World!'
    				alertBtn:'Happy',
    				isShow:false
    			}
    		}
    	},
    	methods:{
    		ok(){
    			console.log('I click the alertBtn~')
    		}
    	}
    }

    2.确认 (2. Confirm)

    道具 (props)

    confirm [Object]

    确认 [Object]

    key value description
    title [String] or [HTML Tag] title of the Confirm
    content [String] or [HTML Tag] content of the Confirm
    cancelBtn [String] cancelBtn of the Confirm
    confirmBtn [String] confirmBtn of the Confirm
    isShow [Boolean] whether show the Confirm
    描述
    标题 [String][HTML Tag] 确认标题
    内容 [String][HTML Tag] 确认内容
    cancelBtn [String] 确认的cancelBtn
    确认 [String] 确认的confirmBtn
    isShow [Boolean] 是否显示确认

    closeOnClickModal [Boolean]

    closeOnClickModal [Boolean]

    prop name description required default
    closeOnClickModal [Boolean]whether close Confirm by clicking the mask modal No false
    道具名称 描述 需要 默认
    closeOnClickModal [Boolean]是否关闭通过单击蒙版模态确认 没有

    发出事件 (emit events)

    • ok when you click the confirmBtn,the component will close.

      单击ok ,单击确定,该组件将关闭。

    • cancel when you click the cancelBtn,the component will close.

      单击cancelBtn时cancel ,该组件将关闭。

    演示代码 (DEMO Codes)

    //template
    <Confirm :confirm="confirm" :closeOnClickModal="true" @ok="ok" @cancel="cancel" />
    
    //script
    export default {
    	data(){
    		return{
    			confirm:{
    				title:'tip',
    				content:'Are you sure to close the window?'
    				confirmBtn:'Yes,please',
    				cancelBtn:"No,thanks"
    				isShow:false
    			}
    		}
    	},
    	methods:{
    		ok(){
    			console.log('I click the confirmBtn~')
    		},
    		cancel(){
    			console.log('I click the cancelBtn~')
    		}
    	}
    }

    3.吐司 (3. Toast)

    toast

    道具 (props)

    toast [Object]

    吐司 [Object]

    key value description required default
    time [Number] control the time of the Toast No 500
    type [String] how to show Toast,has 12 types No default
    content [String] or [HTML Tag] content of the Toast Yes /
    isShow [Boolean] whether show the Toast Yes /
    描述 需要 默认
    时间 [Number] 控制吐司的时间 没有 500
    类型 [String] 如何显示吐司,有12种 没有 默认
    内容 [String][HTML Tag] 吐司的内容 /
    isShow [Boolean] 是否展示吐司 /

    type

    type

    type name description
    top slide from the top
    bottom slide from the bottom
    default show on the window of 30%
    middle show on the window of 50%
    succes show with success icon
    fail show with fail icon
    warn show with warn icon
    text show with lots of words
    loading-circle show with a circle loading
    loading-ball show with a ball loading
    loading-wave show with a wave loading
    mini-loading show with a mini loading
    类型名称 描述
    最佳 从顶部滑动
    底部 从底部滑动
    默认 在30%的窗口上显示
    中间 在50%的窗口上显示
    成功 显示带有成功图标
    失败 显示失败图标
    警告 显示带有警告图标
    文本 显示很多话
    加载圆 显示为圆形加载
    装球 装球表演
    加载波 显示波浪载荷
    小型装载 迷你负载显示

    演示代码 (DEMO Codes)

    //template
    <Toast :toast="toast" />
    
    //script
    export default {
    	data(){
    		return{
    			toast:{
    				isShow:false,
    				time:2000,
    				content:'waiting to delete...',
    				type:'mini-loading'
    			}
    		}
    	}
    }

    4. ActionSheet (4. ActionSheet)

    道具 (props)

    actionSheet [Object]

    actionSheet [Object]

    key value description
    menu [Array - Object] items and the content of the ActionSheet
    isShow [Boolean] whether show the ActionSheet
    描述
    菜单 [Array - Object] 项目和ActionSheet的内容
    isShow [Boolean] 是否显示ActionSheet

    menu must has structure like [label:'del',content:'delete the data']

    菜单必须具有类似[label:'del',content:'delete the data']

    cancelMode [Boolean]

    cancelMode [Boolean]

    prop name description required default
    cancelMode [Boolean]whether show the cancel item No false
    道具名称 描述 需要 默认
    cancelMode [Boolean]是否显示取消项目 没有

    closeOnClickModal [Boolean]

    closeOnClickModal [Boolean]

    prop name description required default
    closeOnClickModal [Boolean]whether close ActionSheet by clicking the mask modal No false
    道具名称 描述 需要 默认
    closeOnClickModal [Boolean]是否通过单击蒙版模态来关闭ActionSheet 没有

    发出事件 (emit events)

    • cancel when you click the cancel item (make sure you turn on the cancelMode).

      cancel当您单击取消项目(请确保您打开cancelMode)。

    • Other emit events depends on the label of menu(actionSheet).Such as :

      其他的发射事件取决于menu(actionSheet)的标签。例如:

    actionSheet:{
    	isShow:false,
    	menu:[
    		{label:'title',content:`<span style=color:blue>Sure?</span><br /><span style=color:#bbb;font-size:12px>You will delete the data...</span>`},
    		{label:'remain',content:'No,i wanna remain'},
    		{label:'del',content:`<p style=color:red>Yes,delete it!`}
    	]
    	/*
    	 * ActionSheet has 2 emit evnets like 'remain' and 'del'.Attention! The label 'title' won't return emit event!
    	 */
    }

    演示代码 (DEMO Codes)

    //template
    	<ActionSheet 
    		:actionSheet="actionSheet" 
    		:cancelMode="cancelMode" 
    		@del="del"
    		@remain="remain"
    		@cancel="cancel"
    	/>
    
    //script
    export default {
    	data(){
    		return{
    			actionSheet:{
    				isShow:false,
    				menu:[
    					{label:'title',content:`<span style=color:blue>Sure?</span><br /><span style=color:#bbb;font-size:12px>You will delete the data...</span>`},
    					{label:'remain',content:'No,i wanna remain'},
    					{label:'del',content:`<p style=color:red>Yes,delete it!`}
    				]
    			}	
    		}
    	},
    	methods:{
    		del(){
    			console.log('I delete the data~')
    		},
    		remain(){
    			console.log('I remain the data~')
    		},
    		cancel(){
    			console.log('I click the cancel item~')
    		}
    	}
    }

    5.加载 (5. Loading)

    道具 (props)

    prop name description required default
    loading [Boolean]whether show the Loading Yes /
    道具名称 描述 需要 默认
    loading [Boolean]是否显示正在加载 /

    演示代码 (DEMO Codes)

    //template
    	<Loading :loading="loading" />
    
    //script
    export default {
    	data(){
    		return{
    			loading:false
    		}
    	},
    	created(){
    		this.loading = true;
    		//request for data
    		this.$http.post('test/productDetail',{}).then(
    			res => {
    				//if the data has been loaded. make the loading false
    				...
    				this.loading = false
    			}
    		).catch(
    			err =>console.log(err)
    		)
    	}
    }

    6. AddressPicker (6. AddressPicker)

    道具 (props)

    prop name description required default
    addressShow [Boolean]whether show the AddressPicker Yes /
    道具名称 描述 需要 默认
    addressShow [Boolean]是否显示AddressPicker /

    closeOnClickModal [Boolean]

    closeOnClickModal [Boolean]

    prop name description required default
    closeOnClickModal [Boolean]whether close AddressPicker by clicking the mask modal No false
    道具名称 描述 需要 默认
    closeOnClickModal [Boolean]是否通过单击遮罩模态来关闭AddressPicker 没有

    发出事件 (emit events)

    • ok when you click the sure button,the AddressPicker will close and return the address data as the event param.

      ok当您单击确定按钮时,AddressPicker将关闭,作为事件参数返回的地址数据。

    • cancel when you click the cancel button,the AddressPicker will close.

      单击“取消”按钮cancel时,AddressPicker将关闭。

    演示代码 (DEMO Codes)

    //template
    	<AddressPicker 
    		:addressShow="addressShow" 
    		@ok="ok" 
    		@cancel="addressShow=false" 
    	/>
    
    //script
    export default {
    	data(){
    		return{
    			addressShow:false
    		}
    	},
    	methods:{
    		ok(cont){
    			this.addressShow = false
    			alert(`You choose ${cont.province}-${cont.city}-${cont.town || ''})
    		},
    	}
    }

    Attention: if there is not town ,the return param doesn't inclucde 'town' key!

    注意:如果没有城镇,则返回参数不会包含“城镇”键!

    Please go the AddressPicker to see the details.

    请转到AddressPicker查看详细信息。

    7.滚动条 (7. Scroller)

    Please go the v-scroller to see the details.

    请前往v-scroller以查看详细信息。

    翻译自: https://vuejsexamples.com/a-mobile-vue-plugin-for-vuedialog/

    vue 移动时间插件

    展开全文
  • vue日历时间插件

    千次阅读 2019-04-25 11:32:22
    下面给大家分享一下我找的时间插件,加上自己的一些整理,附上原地址:https://www.oschina.net/p/vue-better-calendar 首先你需要 安装 npm install --save vue-better-calendar 接着要在main.js中 import ...
  • vue日期时间选择插件 Vue波斯日期时间选择器 (vue-persian-datetime-picker) A vue plugin to select jalali date and time. 一个vue插件来选择jalali日期和时间。 View demo 查看演示 Download Source 下载源 ...
  • vue 封装时间插件

    2020-09-28 19:21:54
    子组件comDatePicker.vue <template> <div> <el-date-picker :clearable="false" v-model="datePickerObj.value" type="date" placeholder="选择日期" value-format="yyyy-MM...
  • Vue常用插件

    2020-07-14 11:20:50
    5.dayjs:时间处理插件。后台数据库返回的时间处理插件。 6.v-charts:图表插件。 7.Vant:轻量、可靠的移动端 Vue 组件库。 8.iView:高质量UI组件库。 9.axios:易用、简洁且高效的http库。作用:封装了复杂的网络...
  • 2.vue-directive-tooltip 安装: npm i vue-directive-tooltip demo链接 文档链接 3. V-Clipboard 安装:npm install --save v-clipboard 文档链接 4.Vue-Focus 安装: npm i vue-focus 文档链接 5.V-Blur 安装: npm i ...
  • 主要为大家详细介绍了vue使用laydate时间插件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue插件编写

    2017-10-16 04:32:49
    插件 Vue 化引发的一些思考这篇文章我不仅仅是要教会大家封装一个 scroll 组件,还想传递一些把第三方插件(原生 JS 实现)Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 “XX 效果如何用 Vue.js 实现” 的...
  • Vue3 插件开发详解

    2020-06-08 10:08:09
    vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • 步骤一:下载laydate插件,放到项目里 ,我的项目结构如下图 步骤二:在index.html 里面引用 步骤三:在所需要的页面中调用 注意: 如果项目用了 eslit ,步骤三调用的时候,一定要加 window ,否则会报 ...
  • Vue使用dayjs时间插件

    2021-02-22 14:59:29
    //time.vue import dayjs from 'dayjs' methods:{ getTimeSetting(){ /*获取当前时间*/ console.log(dayjs().format("YYYY-MM-DD HH:mm:ss")); /*将获取到的时间转换为时间戳*/ console.log(dayjs().unix(dayjs...
  • vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • vue时间插件的引入

    千次阅读 2018-11-13 19:51:42
    首先是在第一个div中引入时间插件  &lt;Row type="flex" justify="end"&gt; &lt;Col&gt; &lt;DatePicker v-model="timeStr" format="yyyy/MM/dd"...
  • vue插件处理相对时间

    2020-12-02 22:58:03
    但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。 Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,如果您曾经用过 Moment.js, 那么您...
  • VUE使用日期时间插件laydate 步骤一:在index.html中引入 <script src="static/layDate/laydate/laydate.js"></script> 步骤二:在组件中直接使用 <template> <div id="dlgproject"> &...
  • vue 常用插件收集

    2021-03-01 15:42:27
    // dayjs 获取当前时间 npm install dayjs --save constdayjs=require('dayjs') constdate=dayjs().format('YYYY_M_D') consttime=dayjs().format('YYYY-M-DHH:mm:ss')
  • vue 过滤器 时间插件

    2018-11-09 10:55:00
    Vue.filter("dateFormat", function (data, dataFormat) { if(typeof (dataFormat)=="undefined"){ return data; } if(typeof (data)=="undefined"){ return data; }e...
  • vue使用Moment插件格式化时间

    万次阅读 多人点赞 2019-04-16 12:21:23
    使用npm命令安装moment npm install moment --save ...// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alia...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,144
精华内容 457
关键字:

vue时间插件

vue 订阅