Vue2的一个漂亮的Datepicker组件

最新推荐文章于 2024-08-21 08:33:55 发布

cuk5239

最新推荐文章于 2024-08-21 08:33:55 发布

阅读量821

点赞数

文章标签： python java vue js html ViewUI

原文链接：https://vuejsexamples.com/a-beautiful-datepicker-component-for-vue2/

版权

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!
美丽！

View demo 查看演示 Download Source 下载源

用法 (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.js和vue-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)

Prop	Description	Type	Default
v-model	dates to be manipulated	Date/Array	--
name	name for input	String	--
type	type for input (inline/normal)	String	normal
inputClass	custom class name for input	String	--
popupClass	custom class name for popup	String	--
disabled	determine whether the DatePicker is disabled	Boolean	false
clearable	clear the date	Boolean	false
rangeSeparator	range separator	String	"~"
format	to set the date format	String	"YYYY-MM-DD"
local	the local of the DatePicker	Object	{ 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 }
disabledDate	specify the date that cannot be selected	Function	()=>{return false}
showButtons	show Cancel/Submit buttons	Boolean	false

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	显示取消/提交按钮	布尔型	假