CODEWITHSUNDEEP
jqueryasp.net-mvcangularjsangularjs-directivemomentjs
Furqan Misarwala
Furqan Misarwala

Reputation: 1891

JQuery Datepicker, angularJs date issue

I have date in JSON format which I am getting from MVC WEB API Controller (2013-09-17 15:18:53Z). I am using jquery datepicker with angularjs. I have input element in which I need to show date based on culture, but on saving time I need it again in JSON format.

Currenlty I am facing an issue of invalid. Can you please suggest the best way to handle it in the directive.

ServerSide : WebAPI

public class MyModel
{
  public int Id { get; set; }
  public DateTime? MyDate { get; set; }
}


[HttpGet]
[Route("")]
public MyModel GetInfo(int id)
{
    MyModel model = GetInfo(id);     
    return model;
}

public static MyModel GetInfo (int id)
{
    MyModel model = new model();
    model.Id = id;
        model.MyDate = DateTime.UtcNow;
}

Client Side :

Directive Jquery DatePicker :

angular.module('common').directive('datePicker', function ($locale) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {

      $(function () {
        element.datepicker({
          onSelect: function (date) {
            scope.$apply(function () {
              ngModelCtrl.$setViewValue(date);
            });
          }
        });
      });
    }
  }
});

UI :

<input type="text" name="Mydate" data-ng-model="vm.data.MyDate" date-picker />

On Service Loaded :

 myService.getInfo(id)
         .then(
         function (load) {
           vm.data = load.data;

           vm.data.Mydate = $filter('date')(load.data.MyDate, 'shortDate');
         });

Upvotes: 0

Views: 651

Answers (1)

TAbdiukov
TAbdiukov

Reputation: 1186

Why use the jQuery controls while mainly working in AngularJS? Consider using AngularJS's stock datepicker.

The 3rd-party ngDatepicker as suggested in the comments hasn't been updated for many years, the demo is dead, and the code is likely incompatible with the modern AngularJS.

You can find examples and a live demo of the AngularJS's official datepicker at the link provided.

Upvotes: 1

Related Questions