Vị trí datepicker bootstrap

Tất cả các bài viết. Bootstrap

Hướng dẫn tạo Datepicker bằng BootstrapTrong bài thực hành học thiết kế web này, các bạn sẽ được hướng dẫn tạo Datepicker bằng Bootstrap

Bước 1. Tạo cấu trúc HTML cho menu chọn ngày

Chọn ngày:

Bước 2. Định dạng CSS

Bước 3. Gọi thư viện Bootstrap

Bước 4. Call library JQUERY

Bước 5. Use JQUERY get day

Bước 6. Gọi thư viện Datepicker

Xem demo Tải Code Chat với hocwebgiare. com

Bộ đếm ngày
Create Datepicker
Bootstrap
Công cụ hẹn hò Bootstrap
JQUERY
CSS3

Bootstrap Xem (29540) Học thiết kế web

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à chia sẻ ở 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

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

<!DOCTYPE html>
<html>
  <head>
    <title>
      Date Picker Options
    </title>

    <!-- (A) LOAD THE LIBRARIES -->
    <link href="dp-dark.css" rel="stylesheet">
    <!-- <link href="dp-light.css" rel="stylesheet"> -->
    <script src="datepicker.js"></script>
  </head>
  <body>
    <!-- (B) THE HTML -->
    <h2>Date Picker Options</h2>
    <input type="text" id="input-opt"/>
    <div id="pick-opt"></div>

    <!-- (C) ATTACH DATE PICKER ON LOAD -->
    <script>
    window.addEventListener("load", function(){
      picker.attach({
        target: "input-opt",
        container: "pick-opt",
        disableday : [2, 7], // DISABLE TUE, SUN
        startmon: true // WEEK START ON MON
      });
    });
    </script>
  </body>
</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ố 8

Tùy chọn chỉ mục tập tin. 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”]