188 lines
5.1 KiB
Vue
188 lines
5.1 KiB
Vue
<template>
|
|
<ciy-header ref="header" title="ciy-inputdatetime组件"></ciy-header>
|
|
<view>
|
|
<view class="ciy-card">
|
|
<view class="title">时间日期选择框</view>
|
|
<view class="content">
|
|
选择日期、时间。<br />
|
|
数据为1970年至今时间戳。
|
|
</view>
|
|
</view>
|
|
<view v-for="n in 7" :key="n" class="zw"> 占位 {{n}}</view>
|
|
<form @submit="submitlog">
|
|
<view class="ciy-form">
|
|
<label>设置日期</label>
|
|
<view>
|
|
<ciy-inputdatetime name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputdatetime>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label>设置时间</label>
|
|
<view>
|
|
<ciy-inputdatetime hasmore clearbtn left btime name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-inputdatetime>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label>禁用</label>
|
|
<view>
|
|
<ciy-inputdatetime disabled btime name="ciy2" value="356253434" @change="chglog('change', $event)"></ciy-inputdatetime>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label>选择月份</label>
|
|
<view>
|
|
<ciy-inputdatetime hasmore selectmonth name="ciy3" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputdatetime>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="txt-center px4 py4">
|
|
<button class="btn" form-type="submit">提交表单</button>
|
|
<button class="btn" @tap="formvalue=1723456700">改变值</button>
|
|
</view>
|
|
<view class="ciy-card formcard" v-if="formdata">
|
|
<view class="content">
|
|
<view v-html="tobr(formdata, true)" class="formdata"></view>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
<view class="ciy-card">
|
|
<view class="title">属性</view>
|
|
<view class="content">
|
|
<view class="prp">name,value,v-model</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">disabled</view>
|
|
<view class="tip">
|
|
禁止选择。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">initevent</view>
|
|
<view class="tip">
|
|
是否产生初始事件。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">hasmore</view>
|
|
<view class="tip">
|
|
是否form携带更多格式的数据。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">placeholder</view>
|
|
<view class="tip">
|
|
占位文字。<br />
|
|
默认 请选择
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">btime</view>
|
|
<view class="tip">
|
|
是否选择时分时间。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">left</view>
|
|
<view class="tip">
|
|
是否左侧显示。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">bordercolor</view>
|
|
<view class="tip">
|
|
选中日期边框和周列分隔线颜色。<br />
|
|
默认 var(--bg6)
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">selecttextcolor</view>
|
|
<view class="tip">
|
|
选中日期、选择年、选择月的文字色。<br />
|
|
默认 var(--man5)
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">selectbg</view>
|
|
<view class="tip">
|
|
选中日期背景色。<br />
|
|
默认 var(--bg1)
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">selectmonth</view>
|
|
<view class="tip">
|
|
是否选择月份。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">weekmonday</view>
|
|
<view class="tip">
|
|
是否周一在第一列。<br />
|
|
默认 false 周日在第一列
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">mindate,maxdate</view>
|
|
<view class="tip">
|
|
可选日期范围，如果不设则不限制。<br />
|
|
数据格式: 2020-12-12、1607702400
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">clearbtn</view>
|
|
<view class="tip">
|
|
是否显示不选日期按钮。点击则清空日期<br />
|
|
默认 false 不显示
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">diastema</view>
|
|
<view class="tip">
|
|
弹出上下间隙，弹出效果更好看。<br />
|
|
默认 16, 单位px
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-card">
|
|
<view class="title">方法</view>
|
|
<view class="content">
|
|
无
|
|
</view>
|
|
</view>
|
|
<view class="ciy-card">
|
|
<view class="title">事件</view>
|
|
<view class="content">
|
|
<view class="evt">@change, update:modelValue</view>
|
|
<view class="tip">
|
|
数值变更事件<br />
|
|
from: init,calendar,hour,minute,done
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
|
<text class="code">{{eventlog.length - index}}</text>
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hr"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
@import '@/pages/demo/zdemo.css';
|
|
</style>
|
|
|
|
<script>
|
|
import zmixin from '@/pages/demo/zmixin.js';
|
|
export default {
|
|
mixins: [zmixin],
|
|
data() {
|
|
return {
|
|
formvalue: 0,
|
|
maxdate: 0
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.maxdate = this.tostamp() + 86400 * 7;
|
|
},
|
|
methods: {
|
|
qd(e) {
|
|
if (e.day == '')
|
|
return false;
|
|
return Math.random() > 0.7;
|
|
}
|
|
}
|
|
}
|
|
</script> |