精华内容
下载资源
问答
  • vue日期时间选择插件 Vue波斯日期时间选择器 (vue-persian-datetime-picker) A vue plugin to select jalali date and time. 一个vue插件来选择jalali日期时间。 View demo 查看演示 Download Source 下载源 ...

    vue日期时间选择插件

    Vue波斯日期时间选择器 (vue-persian-datetime-picker)

    A vue plugin to select jalali date and time.

    一个vue插件来选择jalali日期和时间。

    正在安装 (Installing)

    npm install vue-persian-datetime-picker --save

    webpack.config.js:

    webpack.config.js:

    /**
     * configuration for moment to ignore loading locales
     */
    module.exports.plugins = [
        //...
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        //...
    ]

    用法 (Usage)

    main.js

    main.js

    //...
    import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
    Vue.component('date-picker', VuePersianDatetimePicker);
    //...

    Or in component

    或在组件中

    <template>
        <div>
            <date-picker v-model="date"></date-picker>
        </div>
    </template>
     
    <script>
        import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
        export default {
            data(){
                return {
                    date: ''
                }
            },
            components: {
                datePicker: VuePersianDatetimePicker
            }
        }
    </script>

    您还可以设置默认值: (You can also set default values:)

    main.js

    main.js

    import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
    Vue.use(VuePersianDatetimePicker, {
        name: 'custom-date-picker',
        props: {
            inputFormat: 'YYYY-MM-DD HH:mm',
            format: 'jYYYY-jMM-jDD HH:mm',
            editable: false,
            inputClass: 'form-control my-custom-class-name',
            placeholder: 'Please select a date',
            altFormat: 'YYYY-MM-DD HH:mm',
            color: '#00acc1',
            autoSubmit: false,
            //...  
            //... And whatever you want to set as default 
            //... 
        }
    });

    Then use in component

    然后在组件中使用

    <custom-date-picker v-model="date"></custom-date-picker>

    翻译自: https://vuejsexamples.com/a-vue-plugin-to-select-jalali-date-and-time/

    vue日期时间选择插件

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

    2017-08-04 18:02:49
    vue 时间插件
  • VUE使用日期时间插件laydate 步骤一:在index.html中引入 <script src="static/layDate/laydate/laydate.js"></script> 步骤二:在组件中直接使用 <template> <div id="dlgproject"> &...

    VUE使用日期时间插件laydate
    注:不要在使用npm install安引入了,总报错。
    步骤一:在index.html中引入,包去github中下载

    <script src="static/layDate/laydate/laydate.js"></script>
    

    步骤二:在组件中直接使用

    <template>
    	<div id="dlgproject">
      		<input type="text" id="test" />
      	</div>
    </template>
    <script type='text/ecmascript-6'>
    import { formatDate } from '@/common/commonUtil.js'
    export default {
      name: "dlgproject",
      data() {
        return {
          date: null,
          // 获取全局的laydate,带入到组件中
          laydate: window.laydate
          }
       }
     mounted() {
        this.laydate.render({
          elem: "#test",
          type: "datetime",
          format: "yyyy-MM-dd",
          //赋初值,并用过滤器格式化
          value: formatDate(new Date(this.project.projectStartTime), 'yyyy-MM-dd'),
          done: value => {
            this.date = value;// 选择完时间后,赋值给你的变量
            this.project.projectStartTime = value// 选择完时间后,赋值给你的变量
          }
        });
    
    附:时间过滤器common/commonUtil.js
    
        export function formatDate(date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
            }
        }
        return fmt;
    };
    
    function padLeftZero(str) {
        return ('00' + str).substr(str.length);
    }
    

    效果:
    在这里插入图片描述

    展开全文
  • vue引入日期插件资源
  • vue 日期多选插件

    千次阅读 2020-07-23 17:56:29
    安装:npm install v-calendar@next 配置: 使用: <v-date-picker mode="multiple" v-model="dates" /> ... new Date(2018, 0, 1), // Jan 1st, 2018 new Date(2018, 0, 15), // Jan 15th, 2018

    v-calendar:https://vcalendar.io/datepicker.html

    vue 日期多选插件

    安装:npm install v-calendar@next
    配置:
    vue 日期多选插件

    使用:

    <v-date-picker mode="multiple" v-model="dates" />
    
    dates: [
            new Date(2018, 0, 1), // Jan 1st, 2018
            new Date(2018, 0, 15), // Jan 15th, 2018
            new Date(2018, 0, 29) // Jan 29th, 2018
          ]
    

    vue 日期多选插件

    效果:

    vue 日期多选插件

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

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

    最终效果:

     

    使用步骤:

    1.下载js包

    http://www.layui.com/laydate/

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

     

    3.在index.html中引入

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     6     <title>XXX</title>
     7     <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
     8   </head>
     9   <body>
    10     <div id="app"></div>
    11     <!-- built files will be auto injected -->
    12   </body>
    13 </html>

    4.定义时间日期组件

    <template>
      <div class="hello">
        <input type="text" placeholder="选择体检时间" id="orderTime" v-model="date">
      </div>
    </template>
    
    <script>
    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; } }); } }; </script> <style scoped> .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; } </style>

    5.引用组件

    <div class="">
        <label for="orderTime">体检日期:</label>
        <myTime />
    </div>

     

    转载于:https://www.cnblogs.com/duanzhenzhen/p/10611028.html

    展开全文
  • vue-datetime日期时间插件使用心得

    万次阅读 2018-12-06 15:55:29
    项目需求,需要一款可以限制日期时间日期时间插件,去npm网站搜了一下,vue-datetime插件符合需求,使用人数也在迅速增加,界面也很漂亮,遂选。 插件地址:https://www.npmjs.com/package/vue-datetime 插件...
  • Vue日期插件演示: ://hangaoke1.github.io/vue-datePicker-page/ 完善中~~~~ 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for ...
  • 1、新建dateFormat.js export const dateFormat = function(date, format) { if (typeof date === 'string') { date = date - 0 || (!/\d+T\d+/.test(date) ? date.replace(/-/g, '/') : date);...
  • vue手机端日期插件

    2019-12-22 15:14:16
    后来看到vue的一款日期插件,很好用,现在分享给大家。 vue-mobile-calendar 1、npm安装 npm install vue-mobile-calendar 2、main.js引入插件 //日期插件 import Calendar from 'vue-mobile-calendar...
  • 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-better-calendar是一个基于vue日期选择插件,它提供了四种日期选择模式(范围选择,多选,签到,单选)
  • 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-better-calendar是一个基于 Vue日期选择插件,它提供了四种日期选择模式(范围选择,多选,签到,单选) 安装 使用npm安装 npm install --save vue-better-calendar ES6方式导入 import VueBetterCalendar ...
  • 一个用vue2.0写的日期控件,可以支持简单的年月日选择。地址:https://github.com/Stevenzwzhai/vue-datepicker。 首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),...
  • 步骤一:下载laydate插件,放到项目里 ,我的项目结构如下图 步骤二:在index.html 里面引用 步骤三:在所需要的页面中调用 注意: 如果项目用了 eslit ,步骤三调用的时候,一定要加 window ,否则会报 ...
  • vue移动端时间日期日历选择插件 Demo( 推荐手机端打开 ) https://zhangyongwnag.github.io/vuejs-date-calendar/example/#/Home 一、下载 npm install --save vuejs-date-calendar or yarn add vuejs-date-...
  • 一、下载moment插件 npm install --save moment 二、在main.js中引入插件,并添加原型属性$moment,可全局使用 ...三、在.vue文件中使用moment格式化时间 <p>{{$moment(new Date()).format('M
  • vue好用的日期插件

    2021-06-24 19:19:11
    npm install vue-jlunar-datepicker --save Usage main.js import Vue from 'vue'; import JDatePicker from 'vue-jlunar-datepicker'; Vue.component("j-date-picker",JDatePicker); test.vue <template&...

空空如也

空空如也

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

vue时间日期插件

vue 订阅