demo 原始链接:https://vux.li/demos/v2/#/component/calendar
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <calendar :readonly=\"readonly\" v-model=\"demo1\" :title=\"$t('Basic Usage')\" disable-past placeholder=\"placeholder\" @on-show=\"log('show')\" @on-hide=\"log('hide')\"></calendar>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"readonly = !readonly\">{{ $t('Toggle readonly') }}</x-button>\n </div>\n\n <group>\n <calendar v-model=\"demo2\" :title=\"$t('Set value as TODAY')\" disable-past></calendar>\n </group>\n\n <group>\n <calendar @on-change=\"onChange\" v-model=\"demo3\" :title=\"$t('Disable future')\" disable-future></calendar>\n </group>\n\n <group>\n <calendar @on-change=\"onChange\" v-model=\"demo4\" :title=\"$t('Show popup header')\" show-popup-header :popup-header-title=\"$t('Please select')\" disable-future></calendar>\n </group>\n\n <group>\n <calendar placeholder=\"placeholder\" @on-change=\"onChange\" v-model=\"demo5\" :title=\"$t('Multiple dates')\" :popup-header-title=\"$t('Please select')\" disable-future></calendar>\n </group>\n\n <group>\n <calendar disable-weekend :display-format=\"displayFormat\" :placeholder=\"$t('Please select')\" @on-change=\"onChange\" v-model=\"demo6\" :title=\"$t('Format multiple dates')\" :popup-header-title=\"$t('please select')\"></calendar>\n <cell-box align-items=\"flex-start\">\n <span class=\"selected-days\">value:</span>\n <div>\n <badge v-for=\"day in demo6\" :text=\"day\" :key=\"day\" style=\"margin-right:10px;\"></badge>\n </div>\n </cell-box>\n </group>\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"demo6 = []\">{{ $t('Empty value') }}</x-button>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { Group, Calendar, Cell, Badge, CellBox, XButton } from 'vux'\n\nexport default {\n components: {\n Calendar,\n Group,\n Cell,\n Badge,\n CellBox,\n XButton\n },\n data () {\n return {\n readonly: false,\n demo1: '',\n demo2: 'TODAY',\n demo3: 'TODAY',\n demo4: 'TODAY',\n demo5: [],\n demo6: [],\n displayFormat (value, type) {\n if (type === 'string') {\n return value\n } else {\n return value.length ? (value.length + ' days') : ''\n }\n }\n }\n },\n methods: {\n log (str) {\n console.log(str)\n },\n onChange (val) {\n console.log('on change', val)\n }\n }\n}\n</script>\n\n<style scoped>\n.selected-days {\n color: #999;\n width: 90px;\n}\n</style>\n\n
\n