date.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view>
  3. <view class="item" @tap="dateVisible1=true">日期1</view>
  4. <view class="item" @tap="dateVisible2=true">日期2</view>
  5. <view class="item" @tap="dateVisible3=true">日期3</view>
  6. <view class="result">选择结果:{{result.result}}</view>
  7. <w-picker
  8. :visible.sync="dateVisible1"
  9. mode="date"
  10. startYear="2017"
  11. endYear="2029"
  12. value="2020-04-08 16:45:45"
  13. :current="false"
  14. fields="second"
  15. @confirm="onConfirm($event,'date1')"
  16. @cancel="onCancel"
  17. :disabled-after="false"
  18. ref="date1"
  19. ></w-picker>
  20. <w-picker
  21. :visible.sync="dateVisible2"
  22. mode="date"
  23. startYear="2017"
  24. endYear="2029"
  25. value="2020-03-07 16:45:45"
  26. :current="false"
  27. fields="second"
  28. @confirm="onConfirm($event,'date2')"
  29. @cancel="onCancel"
  30. :disabled-after="false"
  31. ref="date2"
  32. ></w-picker>
  33. <w-picker
  34. :visible.sync="dateVisible3"
  35. mode="date"
  36. startYear="2017"
  37. endYear="2029"
  38. value="2018-11-07 16:25:45"
  39. :current="false"
  40. fields="second"
  41. @confirm="onConfirm($event,'date3')"
  42. @cancel="onCancel"
  43. :disabled-after="false"
  44. ref="date3"
  45. ></w-picker>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. data() {
  51. return {
  52. dateVisible1:false,
  53. dateVisible2:false,
  54. dateVisible3:false,
  55. result:{
  56. result:""
  57. }
  58. };
  59. },
  60. methods:{
  61. onConfirm(res,type){
  62. this.result=res;
  63. console.log(res)
  64. },
  65. onCancel(){
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss">
  71. </style>