chooseTime.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <van-popup
  3. :show="show"
  4. @close="onClose"
  5. position="bottom"
  6. round
  7. :close-on-click-overlay="false"
  8. >
  9. <van-datetime-picker
  10. type="date"
  11. :value="currentDate"
  12. bind:change="onInput"
  13. @confirm="confirm1"
  14. @cancel="cancel"
  15. :min-date="minDate"
  16. :formatter="formatter"
  17. />
  18. </van-popup>
  19. </template>
  20. <script>
  21. import vanPopup from "../../../wxcomponents/weapp/dist/popup/index";
  22. import vanDatetimePicker from "../../../wxcomponents/weapp/dist/datetime-picker/index";
  23. export default {
  24. components: {
  25. vanPopup,
  26. vanDatetimePicker,
  27. },
  28. data() {
  29. return {
  30. show: false,
  31. chooseIndex: null,
  32. currentDate: new Date().getTime(),
  33. minDate: new Date().getTime(),
  34. type: null,
  35. formatter(type, value) {
  36. if (type === "year") {
  37. return `${value}年`;
  38. }
  39. if (type === "month") {
  40. return `${value}月`;
  41. }
  42. return value;
  43. },
  44. };
  45. },
  46. methods: {
  47. cancel() {
  48. this.show = false;
  49. },
  50. onOpen(i, type) {
  51. this.chooseIndex = i;
  52. this.type = type;
  53. this.show = true;
  54. },
  55. formatTime(date) {
  56. date = new Date(date);
  57. var year = date.getFullYear();
  58. var month = date.getMonth() + 1;
  59. var day = date.getDate();
  60. return [year, month, day].map(this.formatNumber).join("/");
  61. },
  62. onClose() {
  63. this.show = false;
  64. this.$emit(
  65. "getEndTime",
  66. this.chooseIndex,
  67. this.$common.transDate(this.currentDate),
  68. this.type
  69. );
  70. },
  71. confirm1(value) {
  72. // this.currentDate = event.detail;
  73. this.show = false;
  74. this.$emit(
  75. "getEndTime",
  76. this.chooseIndex,
  77. this.$common.transDate(this.currentDate),
  78. this.type
  79. );
  80. },
  81. },
  82. };
  83. </script>
  84. <style>
  85. </style>