diff --git a/src/components/date-picker/base/time-spinner.vue b/src/components/date-picker/base/time-spinner.vue
new file mode 100644
index 0000000..9bcef05
--- /dev/null
+++ b/src/components/date-picker/base/time-spinner.vue
@@ -0,0 +1,66 @@
+<template>
+ <div :class="classes">
+ <div :class="[prefixCls+ '-wrapper']">
+ <ul :class="[prefixCls + '-list']">
+ <li v-for="item in hoursList"></li>
+ </ul>
+ </div>
+ <div :class="[prefixCls+ '-wrapper']">
+ <li v-for="item in minutesList"></li>
+ </div>
+ <div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
+ <li v-for="item in secondsList"></li>
+ </div>
+ </div>
+</template>
+<script>
+ const prefixCls = 'ivu-time-picker-cells';
+
+ export default {
+ props: {
+ hours: {
+ type: Number,
+ default: 0
+ },
+ minutes: {
+ type: Number,
+ default: 0
+ },
+ seconds: {
+ type: Number,
+ default: 0
+ },
+ showSeconds: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data () {
+ return {
+ prefixCls: prefixCls
+ };
+ },
+ computed: {
+ classes () {
+ return [
+ `${prefixCls}`,
+ {
+ [`${prefixCls}-with-seconds`]: this.showSeconds
+ }
+ ];
+ },
+ hoursList () {
+ return [];
+ },
+ minutesList () {
+ return [];
+ },
+ secondsList () {
+ return [];
+ }
+ },
+ methods: {
+
+ }
+ };
+</script>
\ No newline at end of file
diff --git a/src/components/date-picker/panel/time.vue b/src/components/date-picker/panel/time.vue
new file mode 100644
index 0000000..452776f
--- /dev/null
+++ b/src/components/date-picker/panel/time.vue
@@ -0,0 +1,82 @@
+<template>
+ <div :class="[prefixCls + '-body-wrapper']">
+ <div :class="[prefixCls + '-body']">
+ <div :class="[prefixCls + '-content']">
+ <time-spinner
+ :show-seconds="showSeconds"
+ :hours="hours"
+ :minutes="minutes"
+ :seconds="seconds"
+ @on-change="handleChange"
+ @on-pick-click="handlePickClick"></time-spinner>
+ </div>
+ <Confirm
+ @on-pick-clear="handlePickClear"
+ @on-pick-success="handlePickSuccess"></Confirm>
+ </div>
+ </div>
+</template>
+<script>
+ import TimeSpinner from '../base/time-spinner.vue';
+ import Confirm from '../base/confirm.vue';
+
+ import Mixin from './mixin';
+
+ const prefixCls = 'ivu-picker-panel';
+ const timePrefixCls = 'ivu-time-picker';
+
+ export default {
+ mixins: [Mixin],
+ components: { TimeSpinner, Confirm },
+ data () {
+ return {
+ prefixCls: prefixCls,
+ timePrefixCls: timePrefixCls,
+ format: 'HH:mm:ss',
+ date: new Date(),
+ value: '',
+ hours: 0,
+ minutes: 0,
+ seconds: 0
+ };
+ },
+ computed: {
+ showSeconds () {
+ return (this.format || '').indexOf('ss') !== -1;
+ }
+ },
+ watch: {
+ value (newVal) {
+ if (!newVal) return;
+ newVal = new Date(newVal);
+ if (!isNaN(newVal)) {
+ this.handleChange({
+ hours: date.getHours(),
+ minutes: date.getMinutes(),
+ seconds: date.getSeconds()
+ });
+ this.$nextTick(_ => this.scrollTop());
+ }
+ }
+ },
+ methods: {
+ handleChange (date) {
+ if (date.hours !== undefined) {
+ this.date.setHours(date.hours);
+ this.hours = this.date.getHours();
+ }
+ if (date.minutes !== undefined) {
+ this.date.setMinutes(date.minutes);
+ this.minutes = this.date.getMinutes();
+ }
+ if (date.seconds !== undefined) {
+ this.date.setSeconds(date.seconds);
+ this.seconds = this.date.getSeconds();
+ }
+ },
+ scrollTop () {
+
+ }
+ }
+ };
+</script>
\ No newline at end of file
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 7b3933b..caf25c0 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -200,7 +200,10 @@
return this.open === null ? this.visible : this.open;
},
iconType () {
- return this.showClose ? 'ios-close' : 'ios-calendar-outline';
+ let icon = 'ios-calendar-outline';
+ if (this.type === 'time') icon = 'ios-clock-outline';
+ if (this.showClose) icon = 'ios-close';
+ return icon;
},
transition () {
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
@@ -341,6 +344,12 @@
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
+ // TimePicker
+ if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
+ if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
+ if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
+ if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
+
const options = this.options;
for (const option in options) {
this.picker[option] = options[option];
diff --git a/src/components/date-picker/picker/time-picker.js b/src/components/date-picker/picker/time-picker.js
new file mode 100644
index 0000000..0951052
--- /dev/null
+++ b/src/components/date-picker/picker/time-picker.js
@@ -0,0 +1,39 @@
+import Picker from '../picker.vue';
+import TimePanel from '../panel/time.vue';
+
+export default {
+ mixins: [Picker],
+ props: {
+ value: {},
+ disabledHours: {
+ type: Array,
+ default () {
+ return [];
+ }
+ },
+ disabledMinutes: {
+ type: Array,
+ default () {
+ return [];
+ }
+ },
+ disabledSeconds: {
+ type: Array,
+ default () {
+ return [];
+ }
+ },
+ hideDisabledOptions: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ type: 'time'
+ };
+ },
+ created () {
+ this.panel = TimePanel;
+ }
+};
\ No newline at end of file
diff --git a/src/components/layout/row.vue b/src/components/layout/row.vue
index c9890ce..7b076ef 100644
--- a/src/components/layout/row.vue
+++ b/src/components/layout/row.vue
@@ -34,8 +34,8 @@
computed: {
classes () {
return [
- `${prefixCls}`,
{
+ [`${prefixCls}`]: !this.type,
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
diff --git a/src/components/time-picker/index.js b/src/components/time-picker/index.js
new file mode 100644
index 0000000..4dfd732
--- /dev/null
+++ b/src/components/time-picker/index.js
@@ -0,0 +1,2 @@
+import TimePicker from '../date-picker/picker/time-picker';
+export default TimePicker;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e6348ef..6bd4737 100644
--- a/src/index.js
+++ b/src/index.js
@@ -34,6 +34,7 @@ import Table from './components/table';
import Tabs from './components/tabs';
import Tag from './components/tag';
import Timeline from './components/timeline';
+import TimePicker from './components/time-picker';
import Tooltip from './components/tooltip';
import Transfer from './components/transfer';
import { Row, Col } from './components/layout';
@@ -91,6 +92,7 @@ const iview = {
Tag,
Timeline,
TimelineItem: Timeline.Item,
+ TimePicker,
Tooltip,
Transfer
};
diff --git a/test/routers/date.vue b/test/routers/date.vue
index 0713eb9..26b2902 100644
--- a/test/routers/date.vue
+++ b/test/routers/date.vue
@@ -6,6 +6,9 @@
<i-col span="12">
<date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
</i-col>
+ <i-col span="12">
+ <time-picker placeholder="选择时间" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
+ </i-col>
</row>
</template>
<script>
diff --git a/test/routers/more.vue b/test/routers/more.vue
index d6208ad..7da4d6d 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -1,27 +1,82 @@
+<style scoped>
+ .demo-row{
+ margin-bottom: 5px;
+ background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
+ background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
+ }
+ .demo-col{
+ color: #fff;
+ padding: 30px 0;
+ text-align: center;
+ font-size: 18px;
+ background: rgba(0, 153, 229, .7);
+ }
+ .demo-col.light{
+ background: rgba(0, 153, 229, .5);
+ }
+ .demo-row.light .demo-col{
+ background: rgba(0, 153, 229, .5);
+ }
+ .demo-row.light .demo-col.light{
+ background: rgba(0, 153, 229, .3);
+ }
+
+ .ivu-col, .ivu-col div{
+ color: #fff;
+ padding: 10px 0;
+ text-align: center;
+ background: rgba(0, 153, 229, .9);
+ }
+ .gutter .ivu-col{
+ background: transparent !important;
+ }
+ .ivu-col:nth-child(odd), .ivu-col:nth-child(odd) div{
+ background: rgba(0, 153, 229, .7);
+ }
+
+ .code-row-bg{
+ background: rgba(0,0,0,.05);
+ }
+</style>
<template>
- {{ fruit |json}}
- <Checkbox-group :model.sync="fruit" @on-change="changed">
- <Checkbox value="a"></Checkbox>
- <Checkbox value="b"></Checkbox>
- <Checkbox value="c"></Checkbox>
- </Checkbox-group>
- <i-button @click="change">change</i-button>
+ <p>子元素向左排列</p>
+ <Row type="flex" justify="start" class="code-row-bg">
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ </Row>
+ <p>子元素向右排列</p>
+ <Row type="flex" justify="end" class="code-row-bg">
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ </Row>
+ <p>子元素居中排列</p>
+ <Row type="flex" justify="center" class="code-row-bg">
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ </Row>
+ <p>子元素等宽排列</p>
+ <Row type="flex" justify="space-between" class="code-row-bg">
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ </Row>
+ <p>子元素分散排列</p>
+ <Row type="flex" justify="space-around" class="code-row-bg">
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ <i-col span="4">col-4</i-col>
+ </Row>
</template>
<script>
export default {
- data () {
- return {
- fruit: ['b']
- }
- },
- methods: {
- change () {
- this.fruit.splice(0, 1);
-// this.fruit = ['a']
- },
- changed (s) {
- console.log(s)
- }
- }
+
}
</script>
--
libgit2 0.21.4