Yêu cầu thg 10 2, 2021 9:29 SA 687 0 1
  • 687 0 1
0

DatePicker trong Vuejs

Chia sẻ
  • 687 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?

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é

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

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

1 CÂU TRẢ LỜI


Đã trả lời 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()
Chia sẻ
Avatar Impg @heyimpg
thg 10 3, 2021 12:58 CH

Mình đã từng sửa được bug này nhờ sự kiện onblur bên javascript

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí