Hướng dẫn time picker javascript - javascript chọn thời gian

Đã đăng vào thg 7 25, 2016 7:00 SA 3 phút đọc 3 phút đọc

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.bootstrap.datepicker và ui.datetimepicker trong angularjs.

• Datepicker

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

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

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

Qua bower: bower install angular-datepicker --save

Qua npm: npm install angular-datepicker --save

Cách sử dụng

Việc sử dụng datepicker rất đơn giản, chỉ cần gán input, button của element html với một controller:

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

Ở file datePickerController.js định nghĩa 1 scope khởi tạo và setting các options 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
  };
}

Ở đây, chúng ta sử dụng controller vm đại diện cho Controller DatepickerDemoCtrl để định nghĩa scope. Sự kiện ng-click vào input sẽ gọi đến hàm today(). Khi model vm.day có giá trị thì input datepicker sẽ nhận giá trị đó để hiển thị trên datepicker, nếu không sẽ nhận date hiện tại làm gía trị hiển thị.

Với tham số options để configure các thuộc tính của datepicker nếu cần thiết:

1. customClass ({date: date, mode: mode}) - một option để thêm class tùy chỉnh.
2. formatDay: định dạng ngày (mặc định là dd)
3. formatMonth: định dạng tháng (mặc định là mm)
4. formatYear: định dạng năm (mặc định là yyyy)
5. maxDate: set max date
6. minDate: set min date

• DatetimePicker

Ui.datetimepicker là một thư viện được mở rộng và phát triển từ ui.datepicker. Sử dụng 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ó 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: Download 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>

Việc sử dụng datepicker rất đơn giản, chỉ cần gán input, button của element html với một controller:

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

Ở file datePickerController.js định nghĩa 1 scope khởi tạo và setting các options cho datepicker:

Ở đây, chúng ta sử dụng controller vm đại diện cho Controller DatepickerDemoCtrl để định nghĩa scope. Sự kiện ng-click vào input sẽ gọi đến hàm today(). Khi model vm.day có giá trị thì input datepicker sẽ nhận giá trị đó để hiển thị trên datepicker, nếu không sẽ nhận date hiện tại làm gía trị hiển thị.

1. Với tham số options để configure các thuộc tính của datepicker nếu cần thiết:
2. customClass ({date: date, mode: mode}) - một option để thêm class tùy chỉnh.
3. formatDay: định dạng ngày (mặc định là dd)
4. formatMonth: định dạng tháng (mặc định là mm)
5. formatYear: định dạng năm (mặc định là yyyy)
6. maxDate: set max date

minDate: set min date

DatetimePicker

• Ui.datetimepicker là một thư viện được mở rộng và phát triển từ ui.datepicker. Sử dụng 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ó 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: Download thư viện tại datetimepicker
• Trong file js sẽ định nghĩa 1 scope với các tham số đc sử dụng trong view

Controller vm đại diện cho datetimepickerDemoCtrl để định nghĩa scope cho view. Biến vm.picker.date và vm.picker.datetimepickerOptions khởi tạo timepicker. Sự kiện ng-click gọi đến function vm.openCalendar để set biến open = true và timepicker sẽ được bật lên.