18 Star 111 Fork 42

刘斌32 / vue-jLunar-datePicker

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-jLunar-datePicker

@JinWen

Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms.

demo

Online demo

Getting Start


New for 2.0

1、add a new Property : type : DATE/DATERANGE (you can pick a period of time by use DATERANGE option)

2、fixed bugs

Install

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>
    <j-date-picker v-model="value1"
         :width="width1"
         :placeholder="placeholder"
         :picker-options="pickerOptions"
         :rangeSeparator="rangeSeparator"
         @change="onDateChange"
         :disabled="disabled"
         :showLunarClass="showLunarClass"
         :showLunarControl="showLunarControl"
         :type="type"
         :showBackYears="showBackYears"
         :showLunarIcon="showLunarIcon"
         :format="format">
    </j-date-picker>
</template>
<script>
export default{
  data(){
    return{
      data:{
        value1:'',
        type:'DATE',
        showLunarClass:'MIX',
        showBackYears:2,
        showLunarIcon:true,
        showLunarControl:true,
        width1:'300',
        format:'YYYY.MM.DD',
        placeholder:'please input something ...',
        rangeSeparator:'-',
        disabled:false,
        editable:true,
        clearable:true,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
      }
    }
  }
}
</script>

API


Attributes

Properties     Description                     Type       Optional value Default value
value bind-value(v-model) String,Date,Array -- --
width width String -- 200px/200
type you can pick a day or pick a period of time String DATE/DATERANGE DATE
showLunarClass The display type of a lunar date; case insensitive; String FULLLUNAR/LUNAR/NUMBER/MIX NUMBER
showLunarIcon whether to show lunar icon Boolean true/false false
showBackYears the years number after now based on the current year Number -- 2
format format Date String -- YYYY-MM-DD
showLunarControl whether to show the lunar control by default Boolean true/false true
editable whether to input your date int the component Boolean true/false false
placeholder placeholder for component String -- --
clearable whether to show the clear button Boolean true/false true
disabled whether to disable this component Boolean true/false false
rangeSeparator date separator String -- '-'
picker-options refer to the following object -- {}

picker-options

Properties     Description                     Type       Optional value Default value
disabledDate Set disable date.Parameter is current date.you should return Boolean .Like examples! Function -- --

event

event name     Description                     return      
change When the input value changes return the value value

GitHub https://github.com/tuhe32/vue-jLunar-datePicker

OSChina https://gitee.com/tuhe32/vue-jLunar-datePicker

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

空文件

简介

极简式基于vue2.0的中文农历日期组件(支持展示农历,节日,节气) 展开 收起
JavaScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/tuhe32/vue-jLunar-datePicker.git
git@gitee.com:tuhe32/vue-jLunar-datePicker.git
tuhe32
vue-jLunar-datePicker
vue-jLunar-datePicker
master

搜索帮助

14c37bed 8189591 565d56ea 8189591