12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <view class="date-pick-select">
- <date-time-picker
- :fields="fields"
- :start="startTime"
- :end="endTime"
- :defaultValue="defaultValue"
- @change="bindChange">
- <image class="date-icon" src="/static/date-icon.png"></image>
- </date-time-picker>
- </view>
- </template>
- <script>
- /**
- * 日期时间选择器(单个)
- */
- import DateTimePicker from '@/components/date-time-picker/date-time-picker.vue';
- export default {
- components: {DateTimePicker},
- props: {
- label: {
- type: String,
- default: ''
- },
- // 时间选择器的粒度 有效值:year | month | day | hour | minute
- fields: {
- type: String,
- default: 'minute'
- },
- // 允许选中的最小值
- startTime: {
- type: String,
- default: ''
- },
- // 允许选中的最大值
- endTime: {
- type: String,
- default: ''
- },
- // 选中的时间
- defaultValue: {
- type: String,
- default: ''
- },
- // 占位符
- placeholder: {
- type: String,
- default: '日期时间'
- },
- },
- methods: {
- bindChange(dateObj){
- this.$emit('change', dateObj)
- }
- }
- };
- </script>
- <style lang="less">
- .date-pick-select {
- display: flex;
- align-items: center;
- justify-content: space-between;
- min-width: 203.12rpx;
- height: 25rpx;
- border: 0.78rpx solid #E1E4ED;
- border-radius: 3.12rpx;
- .uni-input {
- min-width: 101.56rpx;
- font-size: 12.5rpx;
- color: #2E2F33;
- }
- .date-icon {
- margin-left: 7.81rpx;
- width: 10.93rpx;
- height: 10.93rpx;
- }
- }
- </style>
|