帮酷LOGO
  • 显示原文与译文双语对照的内容
calendar and datepicker component with material design for Vue.js

  • 源代码名称:vue-datepicker
  • 源代码网址:http://www.github.com/hilongjw/vue-datepicker
  • vue-datepicker源代码文档
  • vue-datepicker源代码下载
  • Git URL:
    git://www.github.com/hilongjw/vue-datepicker.git
  • Git Clone代码到本地:
    git clone http://www.github.com/hilongjw/vue-datepicker
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/hilongjw/vue-datepicker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • datepicker

    日历和datepicker组件,用于 Vue.js的材质设计

    演示

    演示页面在这里是

    Screenshot

    要求安装

    npm

    $ npm install vue-datepicker
    用法
    <script>// for Vue 1.0importmyDatepickerfrom'vue-datepicker/vue-datepicker-1.vue'// for Vue 2.0importmyDatepickerfrom'vue-datepicker'exportdefault {data () {return {// for Vue 1.0 starttime:'', endtime:'2016-01-19', testTime:'', multiTime:'',// for Vue 2.0 startTime: { time:'' }, endtime: { time:'' } option: { type:'day', week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], format:'YYYY-MM-DD', placeholder:'when?', inputStyle: {'display':'inline-block','padding':'6px','line-height':'22px','font-size':'16px','border':'2px solid #fff','box-shadow':'0 1px 3px 0 rgba(0, 0, 0, 0.2)','border-radius':'2px','color':'#5F5F5F' }, color: { header:'#ccc', headerText:'#f00' }, buttons: { ok:'Ok', cancel:'Cancel' }, overlayOpacity:0.5, // 0.5 as default dismissible:true// as true as default }, timeoption: { type:'min', week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], format:'YYYY-MM-DD HH:mm' }, multiOption: { type:'multi-day', week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], format:"YYYY-MM-DD HH:mm" }, limit: [{ type:'weekday', available: [1, 2, 3, 4, 5] }, { type:'fromto', from:'2016-02-01', to:'2016-02-20' }] } }, components: {'date-picker': myDatepicker }}</script>
    <template>
     <divclass="card">
     <!-- for Vue 1.0 --> <divclass="row">
     <span>Departure Date:</span>
     <date-picker :time.sync="starttime" :option="option" :limit="limit"></date-picker>
     </div>
     <!-- for Vue 2.0 --> <divclass="row">
     <span>Departure Date:</span>
     <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
     </div>
     </div>
    </template>
    API
    • 选项
    • 类型
     type: 'day'//'min', 'multi-day'
    • 格式
    format: 'YYYY-MM-DD HH:mm'
    • 占位符
    placeholder: 'when?'
    • 星期
     week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
    • 月份
     month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
    • wrapperClass
    wrapperClass: ''
    • inputClass
    inputClass: ''
    • inputStyle
    inputStyle: {
     'display': 'inline-block',
     'padding': '6px',
     'line-height': '22px',
     'font-size': '16px',
     'border': '2px solid #fff',
     'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
     'border-radius': '2px',
     'color': '#5F5F5F'
    }
    • 颜色
     color: {
     header: '#ccc',
     headerText: '#f00'
     }
    • 按钮
    buttons: {
     ok: 'OK',
     cancel: 'Cancel'
    }
    • 动画
     overlayOpacity: 0.5,//0.5 as default
     dismissible: true//as true as default
    • 限制
    • 从有时到有时( 当从/到空,天之前/结束/开始时间)
    limit: {
     type:'fromto',
     from:'2016-01-10',
     to:'2016-01-30'}
    • 工作日
    limit:{
     type:'weekday',
     available: [1, 2, 3, 4, 5] 
    }

    prop

    • Vue 1.0
    time:''// string
    <date-picker :time.sync="time" :limit="limit"></date-picker>
    • Vue 2.0
    date: {
     time:''// string}
    <date-picker :date="date" :limit="limit"></date-picker>
    许可证

    许可证许可证




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语