• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    vue-jLunar-datePicker: 极简式基于vue2.0的中文农历日期组件(支持展示农历,节日, ...

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    vue-jLunar-datePicker

    开源软件地址:

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

    开源软件介绍:

    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 valueDefault value
    valuebind-value(v-model)String,Date,Array----
    widthwidthString--200px/200
    typeyou can pick a day or pick a period of timeStringDATE/DATERANGEDATE
    showLunarClassThe display type of a lunar date; case insensitive;StringFULLLUNAR/LUNAR/NUMBER/MIXNUMBER
    showLunarIconwhether to show lunar iconBooleantrue/falsefalse
    showBackYearsthe years number after now based on the current yearNumber--2
    formatformat DateString--YYYY-MM-DD
    showLunarControlwhether to show the lunar control by defaultBooleantrue/falsetrue
    editablewhether to input your date int the componentBooleantrue/falsefalse
    placeholderplaceholder for componentString----
    clearablewhether to show the clear buttonBooleantrue/falsetrue
    disabledwhether to disable this componentBooleantrue/falsefalse
    rangeSeparatordate separatorString--'-'
    picker-optionsrefer to the followingobject--{}

    picker-options

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

    event

    event name    Description                    return      
    changeWhen the input value changes return the valuevalue

    GitHubhttps://github.com/tuhe32/vue-jLunar-datePicker

    OSChinahttps://gitee.com/tuhe32/vue-jLunar-datePicker

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


    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap