Asked Oct 2nd, 2021 9:29 a.m. 463 0 1
  • 463 0 1
0

DatePicker trong Vuejs

Share
  • 463 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
Oct 2nd, 2021 1:27 p.m.

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

0
| Reply
Share
Avatar ImPG @heyimpg
Oct 2nd, 2021 3:13 p.m.

@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
Oct 2nd, 2021 6:44 p.m.

@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
Oct 3rd, 2021 8:31 a.m.
Avatar ImPG @heyimpg
Oct 3rd, 2021 8:46 a.m.

@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 Oct 3rd, 2021 12:39 p.m.
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
Oct 3rd, 2021 12:58 p.m.

...

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