AngularJSを使用してMVCで日付を処理する方法

Question

私は入力datetimeを持っており、その日付を渡しています。

私は合格したものの、常に「01/01/0001 00:00:00」という値を返します。

以下は私が使用したコードです。フォームのng-submitでAddUpdateEmployee（）を呼び出しています。

モデル： -

public partial class Employee 
{ 
    public int Id { get; set; } 
    public string name { get; set; } 
    public DateTime DOB { get; set; } 
    public string Gender { get; set; } 
    public string Email { get; set; } 
    public string Mobile { get; set; } 
    public string Address { get; set; } 
    public DateTime JoiningDate { get; set; } 
    public int DepartmentID { get; set; } 
    public int DesignationID { get; set; } 
} 

ビュー： -

<form name="form.userForm" ng-submit="AddUpdateEmployee()" novalidate > 
     <div id="myModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">{{Action}} Employee Details</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="form-horizontal validationcheck"> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Name :</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="text" class="form-control" data-modal="modal" filter="anything" ng-model="employeeName" placeholder="Employee's Name" ng-required="true" required="required" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>DOB :</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="datetime" class="form-control myCalendar" ng-model="employeeDOB" data-modal="modal" ng-required="true" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Gender:</b> 
            </div> 
            <div class="col-md-8 col-sm-8" ng-required="true"> 
             <input type="radio" title="Male" data-modal="modal" ng-model="employeeGender" value="Male" /> 
             Male 
            <input type="radio" title="Female" data-modal="modal" ng-model="employeeGender" value="Female" /> 
             Female 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Email:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="email" class="form-control" data-modal="modal" ng-model="employeeEmail" placeholder="Employee's Email" ng-required="true" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Mobile:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="text" class="form-control" data-modal="modal" ng-model="employeeMobile" placeholder="Employee's Mobile" ng-required="true" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Address:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="text" class="form-control" data-modal="modal" ng-model="employeeAddress" placeholder="Employee's Address" ng-required="true" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Joining Date:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <input type="datetime" class="form-control myCalendar" data-modal="modal" ng-model="employeeJoiningDate" ng-required="true" /> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Department:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <select id="ddlDepartment" class="form-control ddlDepartment" data-modal="modal" ng-model="employeeDepartment" ng-options="dep.Id as dep.DepartmentName for dep in departments" ng-required="true"> 
              <option value="" selected>--Select Department--</option> 
              @* <option data-ng-repeat="dep in departments" value="{{dep.Id}}">{{dep.DepartmentName}}</option>*@ 
             </select> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"> 
             <b>Designation:</b> 
            </div> 
            <div class="col-md-8 col-sm-8"> 
             <select id="ddlDesignation" class="form-control ddlDesignation" data-modal="modal" ng-model="employeeDesignation" ng-options="dsg.Id as dsg.DesignationName for dsg in designations" ng-required="true"> 
              <option value="" selected>--Select Designation--</option> 
             </select> 
            </div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="row"> 
            <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"></div> 
            <div class="col-md-8 col-sm-8"> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="modal-footer"> 
          <input type="submit" class="btnAdd btn btn-success" value="Save" ng-disabled="form.userForm.$invalid" /> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 


        </div> 
       </div> 
      </div> 
     </div> 
    </form> 

コントローラー： - そのサービスを呼び出す

 public string UpdateEmployee(Employee Emp) 
    { 
     if (Emp != null) 
     { 
      using (EmpEntities dataContext = new EmpEntities()) 
      { 
       int no = Convert.ToInt32(Emp.Id); 
       var employeeList = dataContext.Employees.Where(x => x.Id == no).FirstOrDefault(); 
       employeeList.name = Emp.name; 
       employeeList.DOB = Emp.DOB;      
       employeeList.Gender = Emp.Gender; 
       employeeList.Email = Emp.Email; 
       employeeList.Mobile = Emp.Mobile; 
       employeeList.Address = Emp.Address; 
       //employeeList.JoiningDate = Convert.ToDateTime(Emp.JoiningDate.ToString("dd/MM/yyyy hh:mm")); 
       employeeList.JoiningDate = Emp.JoiningDate; 
       employeeList.DepartmentID = Emp.DepartmentID; 
       employeeList.DesignationID = Emp.DesignationID; 
       dataContext.SaveChanges(); 
       return "Employee Updated Successfully"; 
      } 
     } 
     else 
     { 
      return "Invalid Employee"; 
     } 
    } 

角度コントローラー： -

$scope.AddUpdateEmployee = function() { 
    //alert('here'); 
    var Employee = { 
     Name: $scope.employeeName, 
     DOB: $scope.employeeDOB, 
     Gender: $scope.employeeGender, 
     Email: $scope.employeeEmail, 
     Mobile: $scope.employeeMobile, 
     Address: $scope.employeeAddress, 
     JoiningDate: $scope.employeeJoiningDate, 
     DepartmentID: $scope.employeeDepartment, 
     DesignationID: $scope.employeeDesignation 
     //alert(); 
    }; 

    var getAction = $scope.Action; 

    if (getAction == "Edit") { 
     Employee.Id = $scope.employeeId; 
     var getData = myService.updateEmp(Employee); 
     getData.then(function (msg) { 
      // GetAllEmployee(); 
    } 

そのコントローラ（角コントローラへの対応角度サービス機能）応答

アンギュラ機能： - などの日付のプラグインjQueryのを使用する場合は、例えば、 のためにそれを送信する前に、日付の値を変換し

this.updateEmp = function (employee) { 
    var response = $http({ 
     method: "post", 
     url: "/Employee/UpdateEmployee", 
     data: JSON.stringify(employee), 
     dataType: "json" 
    }); 
    return response; 
} 

Answer 1

は、それがフォーマット設定しました一つはdd/mm/yyyyのように除外し、あなたのAPIは、あなたがあなたの `model`がにバインドされていることを確認し、その後、`日付が正しく設定された検査するオブジェクトをconsole.log`する必要がフォーマットyyyy-mm-dd

// here convert before you sent it with your Angualr Service 
var apiDateFormat = Employee.DOB.split('/'); // ["MM", "dd", "yyyy"] 
Employee.DOB = apiDateFormat[2]+ '-' +apiDateFormat[0] + '-'+ apiDateFormat[1]; 
// send it now... $http service