Eonasdan bootstrap-datetimepicker

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

Hiện nay có rất nhiều thư viện hỗ trợ datepicker như jquery, boostrap, angularjs với giao diện đẹp, dễ sử dụng. Ở bài viết này sẽ hướng dẫn bạn cách sử dụng thư viện ui. khởi động. datepicker and ui. datetimepicker trong angularjs

• Bảng chọn ngày

Để sử dụng được angularjs datepicker, bạn phải cài đặt thư viện ui-bootstrap-datepicker. Có 2 cách cài đặt

1. Tải xuống và sao chép trực tiếp tệp ui-bootstrap-datepicker tại datepicker và thêm vào dự án. Cách này thường được khuyến khích sử dụng tính ổn định của thư viện, bạn sẽ không sợ gặp lỗi hay xung đột với các bản cập nhật mới của thư viện

2. Cài đặt bằng lệnh qua bower hoặc npm

qua bower. bower cài đặt angular-datepicker --save

qua npm. npm cài đặt angular-datepicker --save

Cách sử dụng

Việc sử dụng datepicker rất đơn giản, chỉ cần gán đầu vào, nút của phần tử html với bộ điều khiển

<div ng-controller="DatepickerDemoCtrl as vm">
  <input uib-datepicker ng-model="vm.day" class="date-of-birth" datepicker-options="vm.options" ng-click="vm.today()"/>
div>

Tại file datePickerController. js định nghĩa 1 phạm vi khởi tạo và thiết lập các tùy chọn cho datepicker

angular.module('datepickerApp',['ui.bootstrap')
  .controller('DatepickerDemoCtrl', DatepickerDemoCtrl);
function DatepickerDemoCtrl() {
  vm = this;
  vm.today = function() {
    if (vm.today) {
      vm.day = new Date();
    }
  };
  vm.options = {
    minDate: new Date(),
    showWeeks: true
  };
}

Tại đây, chúng ta sử dụng bộ điều khiển vm đại diện cho Bộ điều khiển DatepickerDemoCtrl để xác định phạm vi. Sự kiện ng-click vào input sẽ gọi đến hàm today(). Khi model vm. day has value, input datepicker will got the value that to display on datepicker, if not will receive date at doing gía value display

Với các tùy chọn tham số để định cấu hình các thuộc tính của datepicker nếu cần thiết

1. customClass ({ngày. ngày, chế độ. mode}) - một tùy chọn để thêm tùy chỉnh lớp
2. định dạngNgày. date format (default is dd)
3. định dạngTháng. định dạng tháng (default is mm)
4. định dạngNăm. định dạng năm (default is yyyy)
5. ngày tối đa. đặt ngày tối đa
6. minDate. đặt ngày tối thiểu

• Bộ chọn ngày giờ

giao diện người dùng. datetimepicker là một thư viện được mở rộng và phát triển từ ui. bảng chọn ngày. Use ui. datetimepicker cho phép chọn thời gian dưới định dạng ngày tháng năm, giờ phút giây, nó có thể hiện sự tiện dụng và giao diện đẹp mà nhiều thư viện khác không có được

Cài đặt. Tải xuống thư viện tại datetimepicker

Cách sử dụng

<div ng-controller="datetimepickerDemoCtrl as vm">
  <input type="text" datepicker-mode="'vm.year'"ismeridian datetimepicker="yyyy" ng-model="vm.picker.date" is-open="vm.picker.open" enable-time="false" datepicker-options="vm.picker.datepickerOptions" ng-click="vm.openCalendar('picker')"/>
div>

Trong tệp js sẽ định nghĩa 1 phạm vi với các tham số được sử dụng trong chế độ xem

angular.module('datetimepickerApp',['ui.bootstrap.datetimepicker')
  .controller('datetimepickerDemoCtrl', datetimepickerDemoCtrl);
function datetimepickerDemoCtrl() {
  vm = this;
   vm.picker = {
    if (!vm.picker.date) {
      date: new Date,
      datetimepickerOptions: {
        max: null
      }
  };
  vm.openCalendar = function(picker) {
    that[picker].open = true;
  };
}

Bộ điều khiển vm đại diện cho datetimepickerDemoCtrl để định nghĩa phạm vi cho chế độ xem. vm. người hái. date and vm. người hái. datetimepickerOptions khởi tạo timepicker. Event ng-click call to function vm. openCalendar to set open = true and timepicker will be enable on

Một số tùy chọn cấu hình datetimepicker

1. giờ-bước. định nghĩa khoảng cách tăng giảm giờ sau mỗi lần nhấp
2. tối đa. đặt khoảng thời gian lớn nhất có thể chọn
3. tối thiểu. đặt khoảng thời gian nhỏ nhất có thể chọn
4. bước phút. định nghĩa khoảng cách tăng giảm phút sau mỗi lần nhấp
5. đầu vào chỉ đọc. bật hoặc tắt tính năng nhập đầu vào (default is false)
6. hiển thị giây. hiển thị đầu vào dưới dạng giây

Công cụ hẹn giờ và công cụ hẹn giờ văn bản tùy chỉnh

Nếu bạn không muốn sử dụng các tên mặc định trên datepicker, bạn có thể thay đổi bằng cách tùy chỉnh theo các tùy chọn sau