JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  This "clearable" control the close button
  <date-picker :value="date" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px" :clearable="clearable">   </date-picker>
  This "clearable" alse control the close button; but we can clear the value in panel
  <date-picker :value="date" format="yyyy年MM月dd日" type="datetime" placeholder="Select date" style="width: 200px" :clearable="clearable">   </date-picker>
  <i-button @click="clearable = !clearable">Change Clearable</i-button>
</div>

SCSS

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}
#app > *{margin: 30px; display: block;}

JavaScript

new Vue({
  el: '#app',
  data: {
    clearable: false,
    date: '2019-11-14',
  },
});