精华内容
下载资源
问答
  • A datepicker Vue component. Compatible with Vue 2.x. Works nice on mobile devices. 日期选择器Vue组件。 与Vue 2.x兼容。 在移动设备上效果很好。 安装 (Install) Copy TouchDatePicker.vue component into ...

    日期选择器 (Datepicker)

    A datepicker Vue component. Compatible with Vue 2.x. Works nice on mobile devices.

    日期选择器Vue组件。 与Vue 2.x兼容。 在移动设备上效果很好。

    安装 (Install)

    Copy TouchDatePicker.vue component into your project

    将TouchDatePicker.vue组件复制到您的项目中

    用法 (Usage)

    import Datepicker from 'touch-datepicker';
    
    export default {
      // ...
      components: {
        Datepicker
      }
      // ...
    }
    <datepicker></datepicker>

    Using v-model

    使用v-model

    <datepicker v-model="state.date" name="uniquename"></datepicker>

    Emits events

    发出事件

    <datepicker v-on:change="saveModification"></datepicker>

    Full example

    完整的例子

    <datepicker v-bind:language="en" v-bind:placeholder="Date of birth" v-bind:input-class="{'datepicker-input-reg': true, 'is-invalid-input': errors.has('event_date')}" v-bind:min="2000-01-01"  v-bind:max="2010-12-31" 
    v-bind:data-vv-as="Please enter your birthdate" v-model="event_date" v-bind:v-validate="{required: true, date_format: 'YYYY-MM-DD'}" name="event_date" id="event_date" @change="saveChanges"></datepicker>
    <span class="form-error" :class="{'is-visible': errors.has('event_date')}">{{ errors.first('event_date') }}</span>

    可用道具 (Available props)

    PropTypeDefaultDescription
    valueDate|StringDate value of the datepicker
    nameStringInput name property
    idStringInput id
    format-dateStringDD MMMM YYYYDate formatting string
    languageStringenTranslation language used by moment
    v-validateObjectValidation rules used by vee-validate
    input-classString|ObjectCSS class applied to the input el
    placeholderStringInput placeholder text
    data-vv-asStringSee vee-validate: Errors localization
    maxStringMax calendar date
    minStringMin calendar date
    Struts 类型 默认 描述
    日期|字符串 日期选择器的日期值
    名称 输入名称属性
    ID 输入编号
    格式日期 DD MMMM YYYY 日期格式字符串
    语言 瞬间使用的翻译语言
    验证 目的 vee-validate使用的验证规则
    输入类 字符串|对象 CSS类应用于输入el
    占位符 输入占位符文本
    数据-视像 请参见vee-validate:错误本地化
    最高 最长日历日期
    最小日历日期

    大事记 (Events)

    You can emit any js event as you would do on a DOM input

    您可以像在DOM输入上一样发出任何js事件

    翻译自: https://vuejsexamples.com/a-datepicker-vue-component-compatible-with-vue-2/

    展开全文
  • My97DatePicker

    2017-09-28 17:21:30
    My97DatePicker,支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,也可以通过这些功能的组合使用轻松搞定·
  • vue-datepicker 适用于 Vue2 的日期/时间选择组件。 Powered by 安装 NodeJS 环境 (commonjs) npm i @hyjiacan/vue-datepicker 或者 yarn add @hyjiacan/vue-datepicker 可以通过以下方式获取最新的代码 git clone ...
  • 地址:https://github.com/Stevenzwzhai/vue-datepicker。 首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),date.getMonth(),date,getDate())。在这里主要的一点就是...

    一个用vue2.0写的日期控件,可以支持简单的年月日选择。地址:https://github.com/Stevenzwzhai/vue-datepicker。

    首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),date.getMonth(),date,getDate())。在这里主要的一点就是根据选择的年和月份去设定当月的天数,使用设定日期,date.setDate(year, month, 0);这里要注意的是,获取哪个月month就是几,day设为零。而获取当前日期时月份要减一,因为在js的Date对象中月份是0~11.

    接下来是关于滑动,在这里使用css3的translate3d,由于是用移动端,因此使用3d动画时可以自动开启设备加速,在一定程度上提高性能。这里只要仔细计算没什么大问题,还要要注意边界问题,滑出边界肯定是不行的。另外滑动加一点时间和动画函数可以使得滑动更加美观,我是用来transition-timing-function:ease-out。

    这里做的是一个组件,所以自然要把设定的时间返回,就涉及到父子组件通信,vue2.0去掉了dispatch,就用$on和$emit就好。具体使用方法,在官网或者imooc都有。

    转载于:https://www.cnblogs.com/Upton/p/6086313.html

    展开全文
  • import VueDatepickerUi from 'vue-datepicker-ui' import 'vue-datepicker-ui/lib/vuedatepickerui.css' ; Vue . component ( 'Datepicker' , VueDatepickerUi ) 要么 < script > import ' vue-datepicker...
  • vue2-datepicker Vue2的Datepicker组件 演示版 安装 $ npm install vue2-datepicker --save 用法 < script > import DatePicker from 'vue2-datepicker' ; import 'vue2-datepicker/index.css' ; export ...
  • 我们在用Vue做前端时,经常会用到iView的UI控件,比如说日期选择器就是比较常用的。官方文档都提供了源码,但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的...
  • Vue 3日期选择器 日期选择器Vue组件。 仅与Vue 3兼容 要在本地查看演示示例,请克隆存储库并运行npm install && npm run dev 演示版 要在线观看演示: : 安装 npm install vuejs3-datepicker --save yarn add ...
  • My97DatePicker一款简易前端日期控件,自带格式验证功能,使用很简单,input标签引用对应的class即可
  • npm install vue-hotel-datepicker PNPM pnpm install vue-hotel-datepicker 纱 yarn add vue-hotel-datepicker import HotelDatePicker from 'vue-hotel-datepicker' import 'vue-hotel-datepicker/dist/...
  • vue2-datepicker, 用于Vue2的datepicker/datetimepicker组件 vue2-datepicker中文版Vue2的Datepicker组件 演示https://mengxiong10.github.io/vue2-datepicker/demo/index.html 安装
  • vue-datepicker-local (vue-datepicker-local) A Beautiful Datepicker Component For Vue2. Vue2的一个漂亮的Datepicker组件。 Lightweight (less than 5kb minified and gzipped) 轻量级(压缩并压缩后少于5kb) ...

    vue-datepicker-local (vue-datepicker-local)

    A Beautiful Datepicker Component For Vue2.

    Vue2的一个漂亮的Datepicker组件。

    • Lightweight (less than 5kb minified and gzipped)

      轻量级(压缩并压缩后少于5kb)

    • Only dependencies Vue

      仅依赖Vue

    • Beautiful!

      美丽!

    用法 (Usage)

    安装 (Install)

    $ npm install vue-datepicker-local

    ES6 (ES6)

    <template>
      <vue-datepicker-local v-model="time" />
    </template>
    
    <script>
    import VueDatepickerLocal from 'vue-datepicker-local'
    
    export default {
      components: {
        VueDatepickerLocal
      },
      data () {
        return {
          time: new Date()
        }
      }
    }
    </script>

    浏览器全局 (Browser globals)

    The dist folder contains vue-datepicker-local.js and vue-datepicker-local.css.

    dist文件夹包含vue-datepicker-local.jsvue-datepicker-local.css vue-datepicker-local.js vue-datepicker-local.css

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="path/to/vue-datepicker-local.css">
    </head>
    <body>
      <div id="app">
        <vue-datepicker-local v-model="time"></vue-datepicker-local>
      </div>
      <script src="path/to/vue.js"></script>
      <script src="path/to/vue-datepicker-local.js"></script>
      <script>
        new Vue({
          el: "#app",
          data: {
            time: new Date()
          }
        })
      </script>
    </body>
    </html>

    道具 (Props)

    PropDescriptionTypeDefault
    v-modeldates to be manipulatedDate/Array--
    namename for inputString--
    typetype for input (inline/normal)Stringnormal
    inputClasscustom class name for inputString--
    popupClasscustom class name for popupString--
    disableddetermine whether the DatePicker is disabledBooleanfalse
    clearableclear the dateBooleanfalse
    rangeSeparatorrange separatorString"~"
    formatto set the date formatString"YYYY-MM-DD"
    localthe local of the DatePickerObject{
    dow: 1, // Monday is the first day of the week
    hourTip: '选择小时', // tip of select hour
    minuteTip: '选择分钟', // tip of select minute
    secondTip: '选择秒数', // tip of select second
    yearSuffix: '年', // format of head
    monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // months of head
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('
    '), // months of panel
    weeks: '一_二_三_四_五_六_日'.split('_'), // weeks
    cancelTip: '取消', // default text for cancel button
    , submitTip: '提交' // default text for submit button
    }
    disabledDatespecify the date that cannot be selectedFunction()=>{return false}
    showButtonsshow Cancel/Submit buttonsBooleanfalse
    Struts 描述 类型 默认
    模型 要操纵的日期 日期/数组 -
    名称 输入名称 -
    类型 输入类型(内联/常规) 正常
    inputClass 输入的自定义类名称 -
    popupClass 弹出窗口的自定义类名称 -
    残障人士 确定是否禁用了DatePicker 布尔型
    可清除的 清除日期 布尔型
    rangeSeparator 范围分隔符 “〜”
    格式 设置日期格式 “ YYYY-MM-DD”
    本地 DatePicker的本地 目的 {
    道琼斯工业平均指数:1,//星期一是一周的第一天
    hourTip:'选择小时',//选择小时的提示
    minutesTip:'选择分钟',//选择分钟的提示
    secondTip:'选择秒数',//选择秒的提示
    yearSuffix:'年',//头格式
    monthsHead:'1月_ 2月_ 3月_ 4月_ 5月_ 6月_ 7月_ 8月_ 9月_ 10月_ 11月_ 12月'.split(' '),//头
    月:'一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(' '),//小组讨论月
    周:'一_二_三_四_五_六_日'.split('_'),//周
    cancelTip:'取消',//取消按钮的默认文本
    ,SubmitTip:'提交'//提交按钮的默认文本
    }
    禁用日期 指定无法选择的日期 功能 ()=> {返回false}
    showButtons 显示取消/提交按钮 布尔型

    大事记 (Events)

    Event NameDescriptionParameters
    confirmtriggers when user confirmsthe value component's binding value
    活动名称 描述 参量
    确认 当用户确认时触发 值组件的绑定值

    翻译自: https://vuejsexamples.com/a-beautiful-datepicker-component-for-vue2/

    展开全文
  • vue-datepicker-local Vue2的一个漂亮的Datepicker组件轻量级(压缩和压缩后小于5kb)仅依赖项Vue Beautiful! 演示vue-datepicker-local Vue2的一个漂亮的Datepicker组件轻量级(压缩和压缩后小于5kb)仅依赖项Vue ...
  • 主要介绍了vue项目中引入vue-datepicker插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue使用datepicker封装日历组件 安装datepickernpm install vue-datepicker --save 新建time.vue页面<template> <div> <myDatepicker :date="startTime" :option="multiOption" :limit="limit...

    vue使用datepicker封装日历组件

    • 安装datepicker
      npm install vue-datepicker --save
      
    • 新建time.vue页面
      <template>
      	<div>
      		<myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker>
      	</div>
      </template>
      
      <script>
      import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
      export default {
          name: "times1",
          data(){
              return {
                  date: '',
                  visible: false,
                  dataForm: {
                      id: 0,
                      num: '',
                      name: '',
                      desc: '',
                      createDate: '',
                      createBy: '',
                      updateDate: '',
                      updateBy: ''
                  },
                  startTime: {  // 相当于变量
                      time: ''
                  },
                  multiOption: {
                      type: 'min',
                      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                          month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                          format:"YYYY-M-D HH:mm",
                          // format: "YYYY-M-D",
                          inputStyle: {
                              'display': 'inline-block',
                              'padding': '6px',
                              'line-height': '22px',
                              'width': '160px',
                              'font-size': '16px',
                              'border': '2px solid #fff',
                              'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                              'border-radius': '2px',
                              'color': '#5F5F5F',
                              'margin': '0'
                          },
                          color: {                // 字体颜色
                              header: '#35acff',    // 头部
                              headerText: '#fff',    // 头部文案
                          },
                          buttons: {                // button 文案
                              ok: '确定',
                              cancel: '取消'
                          },
                          placeholder: '请选时间',
                          dismissible: true
                      },
                      limit: [{
                          type: 'weekday',
                          available: [1, 2, 3, 4, 5,6,0]
                      },
                      {
                          type: 'fromto',
                          from: '2016-02-01',
                          to: '2050-02-20'
                      }]
                  }
              },
              components:{
                  myDatepicker
              }
          }
      </script>
      
      • 启动服务 npm run serve 即可
    展开全文
  • Vue Datepicker Component:一个用于Vue的日期选择组件(Datepicker)
  • vue2-datepicker中文版Vue2演示的Datepicker组件https://mengxiong10.github.io/vue2-datepicker/index.html Install $ npm install vue2-datepicke vue2-datepicker英文版Vue2演示的Datepicker组件...
  • 原因:datepicker不是Vue的组件,v-model属性不能使用 (js中格式化后的时间数据比较大小)参考资料: var str1 = "2019-06-18"; var date1 = new Date(Date.parse(str1.replace(/-/g,"/"))); var str2 = "2019-06-...
  • vue-datepicker的使用

    万次阅读 2018-04-10 14:24:50
    npm install vue-datepicker --save html代码 &amp;lt;myDatepicker :date=&quot;startTime&quot; :option=&quot;multiOption&quot; :limit=&quot;limit&quot;&amp;gt;&amp...
  • 在做vue项目中,少不了使用外部vue组件,今天在项目中使用awesome-vue中的vue-datepicker的时候,遇到了一些问题,花了一些时间终于解决了,现在给大家分享分享! 当我在github找到vue-datepicker项目的时候,按照...
  • vue-jalaali-datepicker vue.js的Jalali日历和日期选择器2演示要求Vue.js ^ 2.0.0 moment-jalaali ^ 0.6.0安装npm $ npm insta vue-jalaali-datepicker jalaali日历和日期选择器用于vue.js 2演示要求Vue.js ^ 2.0.0 ...
  • vue-jLunar-datePicker @JinWen Lunar-Date-Picker组件,lightWeight,功能强大,易于使用,带有节日和节假日术语。 在线演示使用de vue-jLunar-datePicker @JinWen Lunar-Date-Picker组件,重量轻,功能强大,易于...
  • vue 移动端使用日期插件datepicker.js

    千次阅读 2019-07-09 17:25:01
    datepicker.js: //datePicker日期控件 v1.0 //var calendar = new datePicker(); //calendar.init({ // ‘trigger’: ‘#demo1’, /选择器,触发弹出插件/ // ‘type’: ‘date’,/date 调出日期选择 datetime 调出...
  • vue-datepicker-mobile v2英文版Live Demo Props参数描述类型默认自定义自定义数据。* [对象,数组]-endText所选st的结尾文本vue-datepicker-mobile v2英文版Live Demo Props参数描述类型默认自定义自定义数据。* ...
  • vue项目中引入vue-datepicker插件

    万次阅读 2018-05-31 15:23:10
    项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选。...引入vue-datepicker loader:npm install vue-datepicker 引入moment loader:npm install moment --save 因为vue-datepicker是依赖v...
  • @ livelybone / vue-datepicker pkg.module supported ,这意味着您可以在项目中应用摇树 datepickervue组件,包括DatePicker,DatetimePicker,DateRangePicker,TimePicker 资料库 演示版 运行示例 您可以通过...
  • my97DatePicker日期控件

    2020-07-07 19:44:58
    1、下载My97DatePicker组件包 ...2、在页面中引入该组件js文件: <script type="text/JavaScript" src="My97DatePicker/...我需要使用 vue 来完成页面日期同步的效果,因此 使用了 v-model 1.需要一个日期改变的函数 (一
  • vue-datepicker Vue日期插件演示: ://hangaoke1.github.io/vue-datePicker-page/ 完善中~~~~ 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run ...
  • Vue DatePicker和不可用

    2019-10-02 22:16:51
    DatePicker要想不可编辑,设置readonly属性即可 <DatePicker type="date" v-model="xxx.aa" :readonly="disabled"></DatePicker> 转载于:https://www.cnblogs.com/agen-su/p/9771...

空空如也

空空如也

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

datepickervue

vue 订阅