# JpDateRange 日期选择器扩展
# 基础用法
日期选择器一般是绑定的数组，实际开发中基本都是使用的单个字段，不是数组，为了方便开发，对日期选择器进行扩展。支持绑定开始时间和结束时间。
默认type:datetimerange
至
type:daterange
至
开始时间：,结束时间：
限制可选的天数 limitDay: 30
至
开始时间：,结束时间：
<template>
<div>
<h4>默认type:datetimerange</h4>
<jp-date-range
:startTime.sync="startTime"
:endTime.sync="endTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
></jp-date-range>
<h4>type:daterange</h4>
<jp-date-range
type="daterange"
:startTime.sync="startTime"
:endTime.sync="endTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
></jp-date-range>
<div style="margin-top: 12px">
<span>开始时间：{{ startTime }},结束时间：{{ endTime }}</span>
</div>
<h4>限制可选的天数 limitDay: 30</h4>
<jp-date-range
:limitDay="30"
type="datetimerange"
:startTime.sync="startTime2"
:endTime.sync="endTime2"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
></jp-date-range>
<div style="margin-top: 12px">
<span>开始时间：{{ startTime2 }},结束时间：{{ endTime2 }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: '',
startTime2: '',
endTime2: '',
pickerMinDate: '',
pickerMaxDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
if (minDate) {
this.pickerMinDate = minDate.getTime()
}
if (maxDate) {
this.pickerMinDate = ''
this.pickerMaxDate = maxDate.getTime()
}
},
disabledDate: (time) => {
const dayNumber = (90 - 1) * 24 * 3600 * 1000
if (this.pickerMinDate) {
let status = this.pickerMinDate > time.getTime()
if (time.getTime() > this.pickerMinDate + dayNumber) {
status = true
}
return status
}
}
}
}
},
mounted() {
this.startTime = this.$jpDateUtil.format(new Date())
this.endTime = this.$jpDateUtil.format(this.$jpDateUtil.addMonth(new Date(), 2))
},
methods: {
doSubmit() {
console.log(this.startTime, this.endTime)
}
}
}
</script>
显示代码
# 测试筛选组件中的使用
显示/隐藏
暂无数据
共 100 条
- 10条/页
- 50条/页
- 100条/页
- 200条/页
- 1000条/页
无数据
- 1
- 2
- 3
- 4
- 5
- 6
- 10
<template>
<div class="layout-wrapper">
<jp-render-table ref="table" v-loading="loading" :data="tableData" :columns="tableColumns" @load="doLoad" :total="100" @row-click="doRowClick">
<div slot="search">
<jp-render-form ref="form" :list="renderList" :formData.sync="formValues" @query="_query" @reset="_reset"></jp-render-form>
</div>
<div slot="action">
<jp-button type="primary" plain size="mini">新增</jp-button>
<jp-button type="primary" plain size="mini">修改</jp-button>
<jp-button type="danger" plain size="mini">删除</jp-button>
</div>
<jp-table-column slot="workOrderCode" label="工单单号" align="center" prop="workOrderCode" width="180" fixed="left">
<template>
<span>
<a>1111111111111111</a>
</span>
<i class="el-icon-document-copy" :style="{ 'margin-left': '5px' }"></i>
</template>
</jp-table-column>
<jp-table-column align="center" label="操作" slot="opration" width="180" fixed="right">
<template slot-scope="scope">
<jp-link type="primary">编辑({{ scope.$index }})</jp-link>
<jp-link type="danger">删除</jp-link>
</template>
</jp-table-column>
</jp-render-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
tableColumns: [],
loading: false,
formValues: {
name: '',
start: '2022-05-10',
end: '2022-06-10',
dateArray: ['2022-05-10', '2022-06-10']
},
renderList: []
}
},
mounted() {
this.setupColumns()
this.loadData()
this.setupRenderList()
},
methods: {
_query() {
console.log(this.formValues, 'formValues')
},
_reset() {
this.$refs.form.resetFields()
console.log(this.formValues, 'formValues')
// this.formValues = {
// name: '',
// start: '',
// end: ''
// }
},
setupRenderList() {
this.renderList = [
{
span: 6,
type: 'input',
label: '项目名称',
prop: 'name'
},
{
span: 12,
type: 'jp-daterange',
label: '创建时间',
prop: 'dateArray',
startTime: 'start',
endTime: 'end',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
valueFormat: 'yyyy-MM-dd',
limitDay: 30,
on: {
change: function (e) {
console.log(e, 9999999)
}
}
},
{
slot: 'opration'
}
]
},
doRowClick(data) {
console.log(data)
},
setupColumns() {
this.tableColumns = [
{ type: 'index', label: '序号', width: 60, fixed: 'left' },
{ slot: 'workOrderCode', label: '工单单号' },
{ prop: 'code', label: '商品编码', sortable: false },
{ prop: 'name', label: '商品名称', minWidth: 150 },
{ prop: 'name', label: '商品名称2' },
{ prop: 'name', label: '商品名称3' },
{ prop: 'name', label: '商品名称4' },
{ prop: 'name', label: '商品名称5' },
{ prop: 'owner', label: '货主' },
{ prop: 'barcode', label: '商品条码' },
{ prop: 'money', label: '价格', type: 'money' },
{ slot: 'opration', label: '操作' }
]
},
loadData() {
this.$refs.table.reset()
},
doLoad(params) {
console.log(params)
this.loading = true
setTimeout(() => {
this.loading = false
this.tableData = [
{ code: '1', name: '测试名称', owner: '货主名称', barcode: '121212', money: 12 },
{ code: '12', name: '测试名称22222223333333333333333334', owner: '货主名称1', barcode: '22222', money: 1234 },
{ code: '13', name: '', owner: '货主名称2', barcode: '333333', money: 123456 },
{ code: '14', name: '测试名称4', owner: '', barcode: '444444', money: 12454444444 },
{ code: '15', name: '测试名称5', owner: '货主名称4', barcode: '5555555', money: 1244 },
{ code: '16', name: '测试名称6', owner: '货主名称5', barcode: '66666666666666666', money: 12222222 }
]
}, 1000)
}
}
}
</script>
<style scoped lang="scss">
.layout-wrapper {
.jp-link {
margin-right: 12px;
font-size: 12px;
padding: 0 5px;
}
}
a:hover {
text-decoration: none !important;
}
.tip {
font-size: 14px;
padding: 12px 12px 12px 0;
}
</style>
显示代码