Code Monkey home page Code Monkey logo

Comments (9)

jsmrugank avatar jsmrugank commented on June 20, 2024 5

I've solved it. hope it will help you.
but before that this is not understandable to me yet :

ui-date-format="DD, d MM, yy"
The string "Thursday, 11 October, 2012" was not recognized by the datepicker.
here , we are giving format (ui-date-format) and still it expect to give date (as string) in that particular format. what was that mean.

anyway the answer is already given in his documentation.
"The ui-date directive only works with Date objects. If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive. This directive specifies the format of the date string that will be expected in the ng-model. The format string syntax is that defined by the JQueryUI Date picker. For example"

so, no matter what if we are able to get convert our string date into date object then it will work. i've create another directive which will format our string date into date object. so you won't get any uncertain date selected in datepicker.

Directive:

app.directive('asDate', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      modelCtrl.$formatters.push(function(input) {
        var transformedInput;
        if (input) transformedInput = new Date(input);
        else transformedInput = new Date();
        if (transformedInput !== input) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
        }
        return transformedInput;
      });
     }
  };
});

HTML:

 <input ui-date="dateOptions" ng-model="object[column.name]" as-date type="text" class="form-control"/>

where object[column.name] is the dynamic ng-model name.

from ui-date.

lokenthapa avatar lokenthapa commented on June 20, 2024 1

@jsmrugank thanks buddy it was awesome......working perfectly

from ui-date.

sampie avatar sampie commented on June 20, 2024

I have the same problem. I could not get even the example from the readme to work:

ui-date-format="DD, d MM, yy"
The string "Thursday, 11 October, 2012" was not recognized by the datepicker.

from ui-date.

sampie avatar sampie commented on June 20, 2024

I have an object structure containing a date string in Finnish format (dd.mm.yy). So, ui-date's ng-model is pointing to a date as a string. "If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive." From this, I got an impression that specifying ui-date-format="dd.mm.yy" allows ng-model to have strings like "01.10.2015". It is not so?

I have tried something like this:

<input ui-date="dateOptions" ui-date-format="dd.mm.yy" ng-model="group_membership['start_date']" as-date type="text" class="form-control">

from ui-date.

jsmrugank avatar jsmrugank commented on June 20, 2024

I am already specifying format in ui-date like this

$scope.dateOptions = { //--> DATE FORMAT
        changeYear: true,
        changeMonth: true,
        yearRange: '2015:2030',
        dateFormat: 'mm-dd-yy'
  };

so i have set the format from scope. instead of using ui-date-format.

from ui-date.

sampie avatar sampie commented on June 20, 2024

I took ui-date-format parameter away. The dateOptions look like this:
$scope.dateOptions = {
changeYear: true,
changeMonth: true,
yearRange: '2015:2030',
dateFormat: 'mm.dd.yy'
};

If I type to the input field a date string like: "01.01.2016" The resulting ng-model object looks like: "2015-12-31T22:00:00.000Z". Also for some reason, if I have an empty string as a date the object pointed by ng-model disappears from the object structure.

from ui-date.

alexanderchan avatar alexanderchan commented on June 20, 2024

I think the ui-date-format parameter causes more confusion for some reasons:

  • it is mostly used for model changes and only a one way change string -> date. Once it runs the model is changed to a Date.
  • there are two dateformats, the ui-date-format and the one that can be passed using the ui-date options

I'll have to think on this a bit more about how to simplify this. Perhaps #127 is the way to go to keep things in synch and returning to having the date in Date or string in a valid ISO format.

from ui-date.

sampie avatar sampie commented on June 20, 2024

I think a consistent behavior would be that the datepicker would not change the object type from ng-model. User might have the object as a date object or as a string. If object type is string and user has specified the date format, then this format should be used on the ng-model string and on the input field.

from ui-date.

jsmrugank avatar jsmrugank commented on June 20, 2024

@sampie 👍
thanks @alexanderchan for reviewing this issue. Great directive. it help me a lot.

from ui-date.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.