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

Datepicker php là gì?

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 & Datepicker


3. Html

Về html ta chỉ cần 2 cái input text để dùng checkin & checkout

Check In: Check Out:

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

Datepicker php là gì?

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 & Datepicker


3. Html

Về html ta chỉ cần 2 cái input text để dùng checkin & checkout

Check In: Check Out:

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 menu

Datepicker php là gì?

1) Tạo chỉ mục tệp. html



  
    
      Date Picker Options
    

    
    
    
    
  
  
    
    

Date Picker Options

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ố 8

Tù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”]