jp-datetime-picker.vue 856 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <picker :mode="mode" :value="value" :disabled="disabled" :start="start" :end="end" @change="TimeChange">
  3. <view class=" picker action">
  4. <view class="text-grey ">{{label || '请选择'}}</view>
  5. </view>
  6. </picker>
  7. </template>
  8. <script>
  9. import moment from 'moment'
  10. export default {
  11. data () {
  12. return {
  13. label: ''
  14. }
  15. },
  16. props: {
  17. value: {
  18. type: String,
  19. default: '2020-09-12'
  20. },
  21. start: String,
  22. end: String,
  23. mode: String,
  24. disabled: {
  25. type: Boolean,
  26. default: false
  27. }
  28. },
  29. watch:{
  30. value:{
  31. handler (val) {
  32. this.label = val
  33. },
  34. immediate: true,
  35. deep: false
  36. }
  37. },
  38. methods:{
  39. TimeChange(e) {
  40. if(this.mode === 'date'){
  41. this.label = moment(e.detail.value).format('YYYY-MM-DD HH:mm:ss')
  42. }
  43. this.$emit('input', this.label)
  44. }
  45. }
  46. }
  47. </script>