You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

date-picker.vue 1.1 KiB

4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="cu-form-group">
  3. <view class="title">
  4. <text v-if="required" class="lr-required">*</text>
  5. {{ title }}
  6. </view>
  7. <picker
  8. @change="change"
  9. :fields="fields"
  10. :disabled="disabled"
  11. :value="value"
  12. :start="start"
  13. :end="end"
  14. :class="[disabled ? '' : 'picker-arrow']"
  15. mode="date"
  16. >
  17. <view class="picker">
  18. <slot>{{ value || displayPlaceholder }}</slot>
  19. </view>
  20. </picker>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name: 'l-date-picker',
  26. props: {
  27. title: {},
  28. start: { default: '1900-01-01' },
  29. end: { default: '2100-01-01' },
  30. fields: { default: 'day' },
  31. disabled: {},
  32. placeholder: {},
  33. required: {},
  34. value: {}
  35. },
  36. methods: {
  37. change(e) {
  38. this.$emit('input', e.detail.value)
  39. this.$emit('change', e.detail.value)
  40. }
  41. },
  42. computed: {
  43. displayPlaceholder() {
  44. if (this.disabled) {
  45. return ''
  46. }
  47. if (this.placeholder) {
  48. return this.placeholder
  49. }
  50. return this.title ? `请选择${this.title}` : '请选择日期…'
  51. }
  52. }
  53. }
  54. </script>