Ví dụ Directive input month và input week trong AngularJS

Ví dụ Directive input month và input week trong AngularJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ Directive input month và input week trong AngularJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Hai đối tượng cuối cùng chúng ta tìm hiểu liên quan đến ngày tháng đó là input[type="month"] và input[type=""week], cả hai loại này đều là HTML5 nên nó cũng chẳng khác gì những Directive Date, Datetime-local và Time ở các bài trước. Trước tiên chúng ta sẽ tìm hiểu input Month trước nhé.

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

Input[type="month"] là thành phần mở rộng của HTML5 nên nó chỉ chạy trên trình duyệt hiện đại có hỗ trợ HTML5, trường hợp trình duyệt không hỗ trợ thì mặc định nó sẽ chuyển thành type = text và giá trị của nó AngularJS sẽ tự động biến thành giá trị rỗng. Trường hợp này gia trị truyền vào phải đúng với định dạng đó là yyyy-MM.

Mặc định timezone sẽ lấy ở trình duyệt nên nếu bạn muốn tha đổi timezone thì phải dùng ngModelOptions để khai báo.

Danh sách các Directive thường dùng với month.

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 giờ nhỏ nhất, tuân theo định dạng yyyy/MM max String Thiết lập giờ lớn nhất, tuân theo định dạng yyy/MM 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 Ví dụ Directive input[type="month"]

Bây giờ ta làm một ví dụ tương tự như những bài trước đó là lấy ngày giờ hiện tại hiển thị lên input và khai báo khoảng thời gian cho phép là từ tháng 1 năm 2014 đến tháng 12 năm 2014.

XEM DEMO

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive datetime-local</title>
        <style>
            form.invalid{color:red}
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('timeExample', [])
                    .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date();
                }]);
        </script>
    </head>
    <body ng-app="timeExample">
        <form name="myForm" ng-controller="DateController as dateCtrl">
            Chọn tháng trong năm 2014 <br/>
            <input type="month" name="input" ng-model="value"
                   min="2014-01" max="2014-12" required />
            <br/>
            <tt>value = {{value | date: "yyyy-MM"}}</tt><br/>
            <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
            <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
            <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
            <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
        </form>
    </body>
</html> 

Giao diện:

2. Directive input[type="week"] trong AngularJS

Tương tự như Month, week cũng là HTML5 nên cách xử lý cũng tương tự nên lý thuyết sẽ y chang như trên bạn nhé, , chỉ khác ở phần thông số cấu hình min và max là khác nhau.

Directive Giá trị Chi tiết min String Thiết lập giờ nhỏ nhất, tuân theo định dạng yyyy-W max String Thiết lập giờ lớn nhất, tuân theo định dạng yyyy-W Ví dụ: XEM DEMO

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive datetime-local</title>
        <style>
            form.invalid{color:red}
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('timeExample', [])
                    .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date();
                }]);
        </script>
    </head>
    <body ng-app="timeExample">
        <form name="myForm" ng-controller="DateController as dateCtrl">
            Chọn tháng trong năm 2014 <br/>
            <input type="week" name="input" ng-model="value"
                   min="2014-W32" max="2014-W52" required />
            <br/>
            <tt>value = {{value | date: "Www-yyyy"}}</tt><br/>
            <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
            <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
            <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
            <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
        </form>
    </body>
</html> 

Giao diện: 3. Lời kết

Hết bài này đúng là vui thật, vì các bài liên quan đến ngày tháng này làm lui làm tới thấy chán quá. Để các bạn không chán thì bài tiếp theo chúng ta sẽ tìm hiểu hai Directive khá hấp dẫn đó là ngShow và ngHide. Mời các bạn đón xem 

Hy vọng với bài viết về Ví dụ Directive input month và input week trong AngularJS đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!