Datepicker php là gì?
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ể 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 Chắc chắn có rất nhiều bạn sử dụng thư viện hoặc plugin để tạo datepicker như jQuery, Boostrap,… Nhưng bạn cũng hiểu rằng chúng ta sẽ không sử dụng hết tính năng trong thư viện/plugin gây lãng phí tài nguyên. Vì vậy trong bài viết này sharescript sẽ hướng dẫn cách tạo datepicker chỉ sử dụng css và javascript Mình đã nén source và share ở link download cuối bài viết, các bạn có thể kéo xuống dưới tải code về trước sau đó đọc bài viết cho dễ hiểu hơn Create datepicker menu1) Tạo chỉ mục tệp. html
2) Tạo tệp dp-dark. css /* (A) POPUP */ .picker-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s; } .picker-wrap.show { opacity: 1; visibility: visible; } .picker-wrap .picker { margin: 50vh auto 0 auto; transform: translateY(-50%); } /* (B) CONTAINER */ .picker { max-width: 300px; border: 1px solid #000; background: #444; padding: 10px; } /* (C) MONTH + YEAR */ .picker-m, .picker-y { width: 50%; padding: 5px; box-sizing: border-box; font-size: 16px; } /* (D) DAY */ .picker-d table { color: #fff; border-collapse: separate; width: 100%; margin-top: 10px; } .picker-d table td { width: 14.28%; /* 7 EQUAL COLUMNS */ padding: 5px; text-align: center; } /* HEADER CELLS */ .picker-d-h td { font-weight: bold; } /* BLANK DATES */ .picker-d-b { background: #4e4e4e; } /* TODAY */ .picker-d-td { background: #d84f4f; } /* PICKABLE DATES */ .picker-d-d:hover { cursor: pointer; background: #a33c3c; } /* UNPICKABLE DATES */ .picker-d-dd { color: #888; background: #4e4e4e; } 3) Tạo công cụ ghi ngày tháng cho tệp. js ________số 8Tùy chọn chỉ mục tệp. html ngày vô hiệu hóa. [2, 7] . Không cho người dùng chọn ngày thứ 3 và chủ nhật, ví dụ [1, 5] sẽ là thứ 2 và thứ 6 bắt đầu. đúng . Tuần được bắt đầu từ thứ 2, nếu đổi giá trị thành false thì tuần bắt đầu từ chủ nhật Và còn rất nhiều tính năng khác mà bạn có thể tự khám phá [khungdownload manguon=”” redirectbanggi=”sharescript-redirect” tenfilezip=”js-datepick. zip” linkbutton1=”https. //lái xe. Google. com/file/d/1txeDtUpuNer3CN5uJgl_FFEwjQdAe7q-/view?usp=sharing” tenbutton1=”Ổ đĩa liên kết” linkbutton2=”https. //siêu cấp. nz/file/k0Z2gBRC#9TJvD2MDERMF-m872zw_ePMNVx2JE0P1g1R5CrbQ778″ tenbutton2=”Link mega”] |