Công cụ hẹn hò trong php
Có thể bạn đã từng gặp trường hợp như thế này, 1 chức năng nhỏ trong quá trình tìm kiếm, trong đó có 2 tùy chọn chọn ngày CheckIn & CheckOut sử dụng Datepicker và bạn nghĩ ngay phải tạo Date Range Picker với Bootstrap Datepicker Yêu cầu là ngày Nhận phòng phải lớn hơn hoặc bằng ngày hiện tại, và ngày Trả phòng phải lớn hơn ngày Nhận phòng, không cho phép chọn ngược về quá khứ. Phạm vi ngày Phạm vi ngày Phạm vi ngày Vì vậy phải xử lý như thế nào? Tải xuống bản trình diễn 1. Chuẩn bịCác bạn cần tải xuống thư viện Bootstrap và Datepicker 2. cssỞ phần của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker3. HtmlVề html ta chỉ cần 2 cái input text để dùng checkin & checkout
4. Javascript (jQuery)Bạn cần thêm 3 cái tệp js vào cuối trang nữa, trên thẻ đóng Và đoạn mã Js để hiển thị Datepicker và giới hạn khoảng thời gian lựa chọn theo yêu cầu đặt ra ban đầu Có thể rất nhiều bạn đã nhìn thấy lịch quen thuộc này, và thấy nó nhìn rất hay và đẹp. Nhưng lại không biết làm thế nào để áp dụng vào trang web của mình. Vì nó không phải là một trò chơi như bootstrap mà chúng ta có thể cài đặt như bình thương Nội dung chính Hiển thị
Bài viết này của mình sẽ hướng dẫn các bạn cách cài đặt và chỉnh sửa Bootstrap Calendar một cách chi tiết và đơn giản nhất để các bạn có thể sử dụng được ngay. Mình sẽ sử dụng Ruby on Rails để demo. Nhưng mình tin là sau khi đọc nó thì các bạn có thể sử dụng với bất kỳ trang web ngôn ngữ nào mà bạn biết II) Chuẩn bịVâng, việc đầu tiên mà chúng ta cần làm đó chính là sao chép mã nguồn của nó về để sử dụng. Chúng ta phải sao chép các tệp css, js từ mã nguồn của họ để nhập vào dự án của chính mình. Nhưng mà ở đó có rất nhiều file, chúng ta phải copy những file nào? . Trong mã nguồn có rất nhiều thư viện mà ở dự án của chúng ta đã có sẵn nên không việc gì phải lấy hết. Dưới đây mình xin liệt kê những file cần thiết
Trên đây là những tệp bắt buộc phải có với các ứng dụng web. Ngoài ra, chúng ta phải thêm css của bootstrap nếu như các bạn không cài đặt gem của bootstrap
III) Cách sử dụngCó nhiều cách khởi động lịch khác nhau với các cách tải sự kiện khác nhau. Mình chỉ nói 2 cách đơn giản nhất là 1) Mã cứngBạn truyền ngay mảng sự kiện vào trong event_source như dưới đây là xong
Như trên ta thấy, chỉ cần trong event_source có được mảng dữ liệu dưới dạng json nđúng định dạng là được 2) Tìm nạp urlCách này đơn giản hơn rất nhiều và mình nghĩ nó sẽ được sử dụng nhiều nhất. URL chính được truyền vào event_source là nó sẽ tự động tìm nạp dữ liệu về để hiển thị. Và dĩ nhiên là hành động tìm nạp đó sẽ là phương thức lấy với định dạng json
Dữ liệu khi trả về có định dạng
Giải thíchVâng, cách sử dụng thì đơn giản. Nhưng những dữ liệu đó có nghĩa là gì và để làm gì
Vâng, ở trên mình có đề cập đến việc url nội dung sẽ được hiển thị lên phương thức. Vậy cách sử dụng của nó ra sao? . Bạn chỉ cần thêm chế độ xem và tùy chọn khi khơi dậy là xong
Còn một vấn đề nữa mà mình cũng đã từng đề cập đó là cách hiển thị của lịch. Do đó có những cách hiển thị nào? . Hiển thị theo năm, theo tháng, theo tuần và theo ngày. Use it as after ________số 8Dưới đây là hình demo các kiểu hiển thị của lịch NGÀY TUẦN THÁNG NĂM Trên đây là một số hướng dẫn đơn giản để bạn có thể tạo một ứng dụng web sử dụng lịch của boostrap. Các bạn có thể tham khảo một cách chi tiết và đầy đủ hơn tại https. //github. com/Serhioromano/bootstrap-calendar |