inline-calendar: Add demo

src/components/inline-calendar/metas.yml

@@ -97,6 +97,11 @@ events:
     en: emits when value is changed
     zh-CN: 值变化时触发
 changes:
+  next:
+    en:
+      - '[feature] support multi select #1446 #1467'
+    zh-CN:
+      - '[feature] 支持多选 #1446 #1467'
   v2.4.0:
     en:
       - '[enhance] re-render when render-month is changed'
@@ -112,11 +117,6 @@ changes:
       - '[change] render-function params day => date #1361'
     zh-CN:
       - '[change] render-function 参数 day => date（在 3.0 版本前不会影响目前使用）#1361'
-  v2.3.5:
-    en:
-      - '[feature] support multi select #1446 #1467'
-    zh-CN:
-      - '[feature] 支持多选 #1446 #1467'
   v2.4.0:
     en:
       - '[enhance] re-render when render-month is changed'

src/demo_list.json

@@ -107,5 +107,6 @@
   "Drawer",
   "DatetimeView",
   "InlineXNumber",
-  "PopupHeader"
+  "PopupHeader",
+  "InlineCalendarMulti#/demo/inline-calendar-multi"
 ]

src/demos/InlineCalendarMulti.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <inline-calendar v-model="value"></inline-calendar>
+    <br>
+    {{ value }}
+    <div style="padding:15px;">
+      <x-button type="primary" @click.native="updateValue">update value</x-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { InlineCalendar, dateFormat, XButton } from 'vux'
+
+const today = dateFormat(new Date(), 'YYYY-MM-DD')
+const yesterday = dateFormat(new Date().getTime() - 24 * 3600 * 1000, 'YYYY-MM-DD')
+
+export default {
+  components: {
+    InlineCalendar,
+    XButton
+  },
+  data () {
+    return {
+      value: [yesterday, today]
+    }
+  },
+  methods: {
+    updateValue () {
+      if (this.value.length === 1) {
+        this.value = [yesterday, today]
+      } else {
+        this.value = [today]
+      }
+    }
+  }
+}
+</script>

src/theme.less

@@ -28,4 +28,6 @@
 
 @search-cancel-font-color: #FF9900;
 
-@radio-checked-icon-color: #FF9900;
+@radio-checked-icon-color: #FF9900;
+
+@calendar-arrow-color: #c0c0c0;