Score
0
Watch 18 Star 63 Fork 19

刘斌32 / vue-jLunar-datePickerJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
极简式基于vue2.0的中文农历日期组件(支持展示农历,节日,节气) spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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.

Comments ( 2 )

Sign in for post a comment

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

Help Search