drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update DatePicker style

Browse source
This commit is contained in:
梁灏 2019-09-23 14:17:12 +08:00
parent 58fb25acf4
commit 2dabd30c45
2 changed files with 80 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
examples/routers/date.vue
View file

@ -260,10 +260,88 @@
<DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
<DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
<Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
<Divider>快捷方式</Divider>
<Row>
<Col span="12">
<DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
<Col span="12">
<DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
options1: {
shortcuts: [
{
text: 'Today',
value () {
return new Date();
},
onClick: (picker) => {
this.$Message.info('Click today');
}
},
{
text: 'Yesterday',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
},
onClick: (picker) => {
this.$Message.info('Click yesterday');
}
},
{
text: 'One week',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
},
onClick: (picker) => {
this.$Message.info('Click a week ago');
}
}
]
},
options2: {
shortcuts: [
{
text: '1 week',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '1 month',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: '3 months',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
]
}
}
}
}
</script>

2
src/styles/components/date-picker.less
View file

@ -276,7 +276,7 @@
overflow: auto;
}
&-shortcut{
padding: @btn-padding-large;
padding: 6px @padding-md;
transition: all @transition-time @ease-in-out;
cursor: pointer;
overflow: hidden;