Asked thg 10 2, 2021 9:29 SA 513 0 1
  • 513 0 1
0

DatePicker trong Vuejs

Share
  • 513 0 1

Mình đang sử dụng tới datePicker trong vuejs Mình có sử dụng button để hiển thị lịch thay vì bấm vào ô input như mặc định. Mình có dùng refs và dùng hàm showCalendar để gọi như trong code nhưng khi mình dùng 2,3... calendar thì nó có gặp chút vấn đề. Mình k rõ là do gọi refs hay do showCalendar, Không biết thay vì dùng 2 cái đó để hiển thị lên Calendar thì còn cách nào để bấm vào button mà show được calendar lên không ạ? Mình cảm ơn!

Avatar Khang @khangnd
thg 10 2, 2021 1:27 CH

Bạn đang dùng package datepicker nào?

0
| Reply
Share
Avatar ImPG @heyimpg
thg 10 2, 2021 3:13 CH

@khangnd import Datepicker from "vuejs-datepicker"; mình dùng cái này nhé

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
thg 10 2, 2021 6:44 CH

@heyimpg 2,3.. cái có chung 1 ref à b?

còn mình thấy open bằng code bt

https://codesandbox.io/s/vue-datepicker-demo-forked-zir1s

0
| Reply
Share
Avatar ImPG @heyimpg
thg 10 3, 2021 8:31 SA
Avatar ImPG @heyimpg
thg 10 3, 2021 8:46 SA

@le.vinh.thien ý của mình là code như này bạn ạ, mình đang gặp vấn đề là có thể mở 2 cái calendar lên cùng một lúc. Mình nghĩ phần lớn là do cái hàm showCalendar mình gọi nó lên thì nó k tự tắt đi như việc mình dùng 2 ô input mặc định. Bạn thử mở calendar bằng việc ấn vào ô input ở dưới ý, mở calendar 2 nó sẽ tự tắt calendar 1. https://codesandbox.io/s/datepicker-problem-6u9s6

*Note: Cái trang codesandbox này hay quá bạn, giờ mình mới biết

0
| Reply
Share

1 ANSWERS


Answered thg 10 3, 2021 12:39 CH
0

Package này không hỗ trợ yêu cầu của bạn rồi, bạn phải tự custom lại thôi. Một trong những cách giải quyết theo hướng sử dụng showCalendar của bạn là gắn thêm hàm xử lý (vd "onClickOutside") vào event click của document, trong hàm này check nếu user click ra ngoài cái datepicker thì bạn gọi

this.$refs.picker.close()
Share
Avatar ImPG @heyimpg
thg 10 3, 2021 12:58 CH

...

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.