Đầu vào ngày góc đơn giản

Question

Tôi có trang chỉnh sửa cho một sự kiện và một trong các trường của tôi là một ngày. Trong một số trình duyệt có vẻ như hoạt động giống như một hộp văn bản thuần túy (IE8), tuy nhiên trong chrome nó hiển thị "dd/mm/yyyy" và nếu bạn nhấp vào nó, nó có một số tùy chọn bổ sung để cài đặt ngày.

Vấn đề của tôi mặc dù là trên trang chỉnh sửa nó không phổ biến ngày hiện tại (tôi tưởng tượng vì nó không có định dạng chính xác?). Bộ điều khiển MVC trả về dữ liệu ở định dạng này "2014-03-08T00: 00: 00" (chỉ sử dụng các thao tác điều khiển CRUD cơ bản).

<form name="form" class="form-horizontal"> 
<div class="control-group" ng-class="{error: form.EventDate.$invalid}"> 
     <label class="control-label" for="EventDate">Event Date</label> 
     <div class="controls"> 
      <input type="date" ng-model="item.EventDate" id="EventDate"> 
     </div> 
    </div> 
<div class="form-actions"> 
     <button ng-click="save()" class="btn btn-primary"> 
      {{action}} 
     </button> 
     <a href="#/" class="btn">Cancel</a> 
    </div> 
</form> 

Tôi đã xem một số bài đăng về sử dụng chỉ thị và đồng hồ, nhưng điều đó có vẻ phức tạp. Tôi đã nghĩ rằng sẽ có một cách tương đối đơn giản để định dạng dữ liệu mô hình để nó hiển thị ở định dạng đúng và hoạt động như mong đợi. Tôi không quan tâm nếu Chrome cung cấp trải nghiệm khác với các trình duyệt khác - đó chỉ là một trang web người dùng nội bộ đơn giản. Tôi chỉ không thích rằng nó không chuẩn bị trước ngày tôi chỉnh sửa một bản ghi.

Answer 1

Nếu bạn muốn để cư lĩnh vực này với giá trị ban đầu, thì đây sẽ làm việc

//Controller: 
$scope.myDate = new Date('2014-03-08T00:00:00'); 

//HTML: 
<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" /> 

Tuy nhiên, tôi khuyên bạn nên tạo một chỉ thị trường ngày tùy chỉnh.

Một tùy chỉnh thị trường nhập cung cấp các lợi ích sau:

1. hai chiều ràng buộc giữa mô hình và quan điểm. Ví dụ: khi bạn nhập ngày hợp lệ vào trường nhập, nó sẽ tự động chỉ định ngày javascript cho mô hình; và khi bạn chỉ định ngày javascript hợp lệ làm mô hình, nó sẽ tự động định dạng nó trong trường văn bản.
2. Hỗ trợ xác thực biểu mẫu. Khi bạn nhập ngày không hợp lệ, bạn có thể đặt cờ lỗi $, có thể được sử dụng trong các liên kết chế độ xem của bạn (tức là hiển thị thông báo lỗi). Đặt cờ báo lỗi cũng sẽ đặt form.$valid thành sai để bạn có thể gửi biểu mẫu theo điều kiện cho máy chủ.

Có ba điều cơ bản cần xem xét khi thực hiện một chỉ thị ngày tuỳ chỉnh:

1. Một phân tích cú pháp mà sẽ phân tích văn bản đầu vào và trở lại mô hình (trong trường hợp này, một ngày javascript) .
2. Trình định dạng sẽ định dạng mô hình và hiển thị nó trong trường văn bản.
3. Đặt cờ xác thực tùy chọn có thể được sử dụng trong giao diện người dùng để xác thực biểu mẫu tùy chỉnh.

ngày Chỉ thị:

myApp.directive('dateField', function($filter) { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
      ngModelController.$parsers.push(function(data) { 

       //View -> Model 
       var date = Date.parseExact(data,'yyyy-MM-dd'); 

       // if the date field is not a valid date 
       // then set a 'date' error flag by calling $setValidity 
       ngModelController.$setValidity('date', date!=null); 
       return date == null ? undefined : date; 
      }); 
      ngModelController.$formatters.push(function(data) { 
       //Model -> View 
       return $filter('date')(data, "yyyy-MM-dd"); 
      });  
     } 
    } 
}); 

Lưu ý: Đối với phân tích ngày tháng, chỉ thị này sử dụng Date.js (một thư viện bên ngoài).

CSS:

.error { 
    color:red; 
} 
.error-border { 
    border: solid 2px red; 
} 

HTML:

<form name="myForm"> 
    <input ng-class="{'error-border': myForm.myDate.$error.date}" type="date" 
      name="myDate" ng-model="myDate" date-field /> 
       <span ng-show="myForm.myDate.$error.date" class="error"> 
        Please enter a valid date!!! 
       </span>    
     <br /> Raw Date: {{myDate}} 
     <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}  
     <br /> Is Valid Date? {{ !myForm.myDate.$error.date}} 
     <br /> Is Form Valid? {{ myForm.$valid }} 
</form> 

Bộ điều khiển:

myApp.controller('ctrl', function($scope) { 
    $scope.myDate = new Date('2014-03-08T00:00:00'); 
}); 

Demo JS Fiddle với Date.js
Demo JS Fiddle với Moment.js