hs-vue-calendar

##安装

npm install --save-dev hs-vue-calendar

##使用

html

<div class="calendar">
    <div class="item">
        <input type="text" class="time1" placeholder="item1" v-model="items.item1.val" :readonly="items.item1.isReadOnly" @click="open('item1',$event)">
        <i class="icon"></i>
    </div>
    <div class="item">
        <input type="text" class="time2" placeholder="item2" v-model="items.item2.val" :readonly="items.item2.isReadOnly" @click="open('item2',$event)">
        <i class="icon"></i>
    </div>
    <div class="item">
        <input type="text" class="time3" placeholder="item3" v-model="items.item3.val"  @click="open('item3',$event)">
        <i class="icon"></i>
    </div>
    <div class="item">
        <input type="text" class="time4" placeholder="item4" v-model="items.item4.val"  @click="open('item4',$event)">
        <i class="icon"></i>
    </div>
    <v-calendar :p-store="pStore"
                :is-gray="isGray"
                :site-x="siteX"
                :site-y="siteY"
                :format="format"
    ></v-calendar>
</div>

js

var Vue = require('vue');
var vCalendar = require('hs-vue-calendar');

new Vue({
    el: '.calendar',
    //render: (createElement) => createElement(vCalendar)
    components: {
        'v-calendar': vCalendar
    },
    data: function () {
      return {
          pStore: {
              isShow: false,
              val:''
          },
          siteX:0,
          siteY:0,
          isGray:true,//清空按钮置灰
          format: 'yyyy-mm-dd',
          item:'',
          items:{
              item1:{
                  isReadOnly: true,//是否只读
                  val:''
              },
              item2:{
                  isReadOnly: false,//是否只读
                  val:''
              },
              item3:{
                  val:''
              },
              item4: {
                  val:'2012-11-13'
              }

          }

      }
    },
    methods: {
        open: function (item,e) {
            var _self = this;
            _self.item = item;
            _self.siteX = e.target.offsetLeft;
            _self.siteY = e.target.offsetTop + e.target.offsetHeight;
            _self.pStore.val = _self.items[item].val || '';
            _self.pStore.isShow = true;
            if (_self.pStore.val) {
                _self.isGray = false;
            } else {
                _self.isGray = true;
            }
        }
    },
    updated: function () {
        var _self = this;
        _self.$watch('pStore.val',function (value) {
            _self.items[_self.item].val = value;
        });
    }
});

##配置项

| 参数| 默认值 | 描述 |备注|
| - | :- | :- |
|pStore|isShow : false<br/>val : ''|isShow是是否显示日历插件，val为输入框的值|必选
|siteX|0|日历的位置|必选|
|siteY|0|日历的位置|必选|
|isShowBtn|false|是否显示`今天` `清空`按钮|--|
|isGray|true|清空按钮的状态,true为置灰不可点,false为可点状态|如果设置显示底部按钮,则该项一定要设置|
|format|yyyy/mm/dd|日期格式<br/>(yyyy/mm/dd、yyyy-mm-dd、dd/mm/yyyy、dd-mm-yyyy)|--|
|weeks|['日','一','二','三','四','五','六']|星期|--|
|months|['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']|月份|--|