ANGULARJS
Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider. Sử dụng Karma và Jasmine để test ứng dụng AngularJS Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS Tích hợp thư viện và module bằng Bower và npm vào Angular Xử lý lỗi với $exceptionHandler và $log service trong AngularJS. Sử dụng Custom Directives trong AngularJS Interceptors và Http Service trong Angular Tạo và sử dụng directive trong AngularJS Cách sử dụng service trong AngularJS Cách sử dụng Dependency Injection trong AngularJS Cách sử dụng route trong AngularJS Tạo hiệu ứng với ngAnimate trong AngularJS Tối ưu hóa hiệu suất trong AngularJS Security trong AngularJS và cách sử dụng đơn giản Đa ngôn ngữ Internationalization (i18n) trong AngularJS Two way data binding trong Angularjs Bài 01: Tổng quan về AngularJS Bài 02: Download AngularJS và viết ứng dụng AngularJS đầu tiên Bài 03: Tìm hiểu Controller trong AngularJS Bài 04: Tìm hiểu Scope và rootScope trong AngularJS Bài 05: Tìm hiểu AngularJS Directives - Danh sách Directives Bài 06: Directive ng-model trong AngularJS Bài 07: Directive ng-model-options trong AngularJS Bài 08: Directives ng-bind - ng-bind-html - ng-bind-template trong AngularJS Bài 09: Directive Form trong AngularJS Bài 10: Directive ng-form trong AngularJS Bài 11: Directive input trong AngularJS Bài 12: Directive input checkbox trong AngularJS Bài 13: Directive input date trong AngularJS Bài 14: Directive input datetime-local trong AngularJS Bài 15: Directive input time trong AngularJS Bài 16: Directive input month và input week trong AngularJS Bài 17: Directive ng-show và ng-hide trong AngularJS Bài 18: Directive ng-repeat trong AngularJS Bài 19: Directive ng-init trong AngularJS Bài 20: Directive ng-include trong AngularJS Bài 21: Services trong AngularJS và cách tạo Service mới Bài 22: Directive ng-class trong angularjs Tạo tabs với ng-show & ng-class & ng-click trong angularjs Bài 23: Directive ng-click trong angularjs Bài 24: Directive ng-class-odd và ng-class-even trong Angularjs [Học AngularJS] - Bài 01 - Hello World! [Học AngularJS] - Bài 02 - ng-app [Học AngularJS] - Bài 03 - ng-controller [Học AngularJS] - Bài 04 - $scope [Học AngularJS] - Bài 05 - $rootScope
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 13: Directive input date trong AngularJS

Thông thường để xây dựng một chức năng hiển thị ngày tháng năm ra ngoài thì ta sử dụng plugin jquery UI, nhưng điều này không còn nữa nếu ta sử dụng HTML5 cho thẻ input với type = "date", kết hợp với AngularJS nữa thì việc xử lý trên object này hoàn toàn dễ dàng. Đây là giao diện khi chúng ta khai báo type="date" trong các thẻ input.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

date-in-html5

Khi bạn sử dụng input[date] thì nó cũng có các Directives dùng để validate thông tin như những bài trước, tuy nhiên có sự khác biệt xíu là các directive sẽ sử dụng không giống nhau do giá trị của date là ngày / tháng / năm không giống với các thẻ input thông thường. Để rõ hơn ta sẽ tìm hiểu các phần dưới đây.

1. Directive input[type="date"] trong AngularJS

Như ở trên mình có nói thuộc tính date này chỉ hỗ trợ trên HTML5 vì đây là một thẻ mới không hỗ trợ trong các trình duyệt cũ, chính vì vậy nếu bạn khai báo kiểu date mà trình duyệt không hỗ trợ HTML5 thì lúc này input này sẽ được chuyển sang loại mặc định (textbox).Trong trường hợp này dữ liệu nhập vào phải đúng với quy cách mà coder chọn, ví dụ như ngày\tháng\năm hoặc ngày-tháng-năm, ...

Với loại này thì dữ liệu nhập vào luôn luôn là một đối tượng Date đúng định dạng, nếu không sẽ bị thông báo lỗi không hợp lệ, lúc này dữ liệu sẽ được tính giống như là một chuỗi rỗng.

Bài viết này được đăng tại [free tuts .net]

Các múi giờ (Timezone) được xác định thông qua Directive ng-model-options, chi tiết thế nào thì chúng ta sẽ tìm hiểu thông qua các ví dụ về date trong angularjs nhé.

2. Danh sách Directive dùng trong input[type="date"]

Directive Giá trị Chi tiết
ngModel String Tên liên kết với $scope
name String Tên của input
min String Thiết lập ngày nhỏ nhất, tuân theo định dạng yyyy-MM-dd
max String Thiết lập ngày lớn nhất, tuân theo định dạng yyyy-MM-dd
required String Bắt buộc nhập cho input
ngRequired String Nếu giá trị bằng true thì Angular sẽ tự thêm thuộc tính Required
ngChange String Xay ra khi ta đổi giá trị của input

3. Ví dụ Directive input[type="date"] trong AngularJS

Lấy ngày hiện tại

Trong ví dụ dưới đây chúng ta sẽ lấy ngày tháng năm hiện tại để gán vào thẻ input, ta sẽ sử dụng hàm new Date() để lấy ngày hiện tại và truyền vào trong controller.

XEM DEMO

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-Form</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('myapp', [])
                .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date();
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <form name="myForm" ng-controller="DateController">
            <input type="date" name="input" ng-model="value" />
        </form>
    </body>
</html>

Hiển thị giá trị ra trình duyệt

Trong ví dụ này chúng ta xây dựng ứng dụng khi chọn ngày thì lập tức sẽ hiển thị nó ra, quy trình và các rules như sau:

  • Sử dụng hai thuộc tính minmax để xác định khoảng năm có thể chọn
  • Sử dụng biểu thức {{value}} để hiển thị giá trị khi nhập liệu

XEM DEMO

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-Form</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('myapp', [])
                .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date();
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <form name="myForm" ng-controller="DateController">
            <input type="date" name="input" ng-model="value" min="2014-01-01" max="2014-12-31" required /> <br/><br/>
            <tt>value = {{value}}</tt><br/>
        </form>
    </body>
</html>

Giao diện:

date in html5 2 png

Bạn thấy giá trị khi lấy lên nó hiển thị luôn cả timezone, muốn chỉ hiển thị ngày tháng năm thôi thì chúng ta thay đổi biểu thức hiển thị một chút xíu đó là từ {{value}} thành {{value | date : "dd/MM/yyyy"}}. Trong đó value là tên key, date là dạng dữ liệu là date, chuỗi dd/MM/yyyy là định dạng hiển thị ngày tháng năm.

XEM DEMO

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-Form</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('myapp', [])
                .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date();
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <form name="myForm" ng-controller="DateController">
            <input type="date" name="input" ng-model="value" min="2014-01-01" max="2014-12-31" required /> <br/><br/>
            <tt>value = {{value | date : "dd/MM/yyyy"}}</tt><br/>
        </form>
    </body>
</html>

Giao diện:

date in html5 3 png

Các bạn có thấy năm nó bị mờ đi và ta không chọn được không? Lý do chính là hai giá trị min và max nằm tron năm 2014 nên ta không thể chọn năm khác được.

4. Lời kết

Tới đây là quá đủ cho Directive date này rồi, các bạn chỉ cần đọc qua, xem và làm các ví dụ và hiểu được là quá ok rồi. Tới đây có lẽ các bạn đã biết được định nghĩa Directive là gì và cách sử dụng nó rồi nhỉ. Vẫn còn rất nhiều nhưng mình không thể trình bày hết được, các bạn có thể lên trang chủ của nó để tham khảo thêm.

Cùng chuyên mục:

Tích hợp thư viện và module bằng Bower và npm vào Angular

Tích hợp thư viện và module bằng Bower và npm vào Angular

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Two way data binding trong Angularjs

Two way data binding trong Angularjs

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Security trong AngularJS và cách sử dụng đơn giản

Security trong AngularJS và cách sử dụng đơn giản

Tối ưu hóa hiệu suất trong AngularJS

Tối ưu hóa hiệu suất trong AngularJS

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Tạo hiệu ứng với ngAnimate trong AngularJS

Tạo hiệu ứng với ngAnimate trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng service trong AngularJS

Cách sử dụng service trong AngularJS

Tạo và sử dụng directive trong AngularJS

Tạo và sử dụng directive trong AngularJS

Interceptors và Http Service trong Angular

Interceptors và Http Service trong Angular

Sử dụng Custom Directives trong AngularJS

Sử dụng Custom Directives trong AngularJS

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Top