indrimuska / angular-moment-picker Goto Github PK

Is there anyway that I could grab the date as a Moment object instead of the formatted string? Also, it might be useful to have an option to set the first day of the calendar since it's different here (we start our weeks on Monday).

It would be helpful if the picker could be used in contexts where it's necessary to select down to second precision.

A very very useful widget but maybe a timezone setting is missing.

A little approximate suggestion:

(function (angular) {

  var momentPickerProvider = (function () {
    function momentPickerProvider() {
      defaults = {
        ...
        /*** PATCH START ***/
        timezone:      undefined,  // e.g. +0100
        /*** PATCH END ***/
        ...
      };
    };
    ...
  })();

  var MomentPickerDirective = (function () {
    function MomentPickerDirective(timeout, sce, compile, document, momentPickerProvider) {
      this.restrict = 'A',
      this.scope = {
        ...
        /*** PATCH START ***/
        timezone:  '@?',
        /*** PATCH END ***/
        ...
      };
      ...
    };
    MomentPickerDirective.prototype.$inject = ['$timeout', '$sce', '$compile', '$document', 'momentPicker'];
    MomentPickerDirective.prototype.link = function ($scope, $element, $attrs) {

      /*** PATCH START ***/
      function momentTZ(input, format, locale) {
        var tz = $scope.timezone;
        if (angular.isDefined(input)) {
          if (!angular.isDefined(tz)) return moment(input, format, locale);
          return moment(input + ' ' + tz, format + ' Z', locale).utcOffset(tz);
        }
        return (angular.isDefined(tz) ? moment().utcOffset(tz) : moment());
      }
      /*** PATCH END ***/

      $scope.template = (
        ...
      );
      // one-way binding attributes
      ...
      // utilities
      ...
      $scope.limits = {
        ...
        checkView: function () {
          /*** PATCH START ***/
          if (!angular.isDefined($scope.view.moment)) $scope.view.moment = momentTZ().locale($scope.locale);
          /*** PATCH END ***/
          ...
        }
      };
      ...
      // month view
      $scope.monthView = {
        days: (function () {
          var days = [],
            /*** PATCH START ***/
            day  = momentTZ().locale($scope.locale).startOf('week');
            /*** PATCH END ***/
          ...
        })(),
        ...
      };
      ...
      // creation
      ...
      // initialization
      ...
      // properties listeners
      $scope.$watch('model', function (model, previous) {
        if (angular.isDefined(model)) {
          /*** PATCH START ***/
          $scope.valueMoment = momentTZ(model, $scope.format, $scope.locale);
          /*** PATCH END ***/
          ...
        }
        ...
      });
      ...
      $scope.$watch('[minDate, maxDate]', function () {
        angular.forEach(['minDate', 'maxDate'], function (limitValue) {
          if (angular.isDefined($scope[limitValue])) {
            /*** PATCH START ***/
            $scope[limitValue + 'Moment'] = momentTZ($scope[limitValue], $scope.format, $scope.locale);
            /*** PATCH END ***/
            ...
          }
        });
        ...
      }, true);
      ...
    };

    return MomentPickerDirective;
  })();
  ...
})(window.angular);

Awesome Library !! I am creating a range picker taking start time and end time . But I need to configure the end time such that if the start time is in 30 minutes past any hour (like 1:30 , 2:30) , the end time calendar should show only hours past 30 minutes in day view . The hoursFormat property is to be configured in the config section . Can it be done on the fly ?

I'm implementing a date range control, and as it stands, i need to create a watch to
ensure the start date is less than the end date. Looking at the source, it would be straightforward to support an on-change event so the user does not have to resort to
additional watches.

500 Internal Server Error

http://rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.js
http://rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css

This is a great picker, Just a suggestion but it would be nice if there was an option to select a range without having to use a secondary picker.

I know it is easier said then done, Just something I think would be really nice in this.

Hi. @indrimuska
Is there a dynamic way to set the min-date value as today?
and is this possible for the hour?

Regards

In Mozilla Firefox, if you click in the Date Picker dialog jumps to a different spot. This happens only in Mozilla Firefox. Most significant of these is clear effect noticeable when the datpiker depends to a input field. This is adjustable with the demo website.

http://indrimuska.github.io/angular-moment-picker/

my code:

<div class="form-group">
         <label>XXX</label>
         <input type="text"
                  class="form-control input-sm"
                  moment-picker="XXXX.creatObject.buyDate"
                  min-view="month"
                  max-view="month"
                  placeholder="XXX"
                  value="{{XXX.creatObject.buyDate | amDateFormat: 'DD.MM.YYYY'}}"
                  required>
</div>

Hi,

after installing your module with bower (and moment.js) i've tried to require it with browserify.
Everything seems to work perfect, but when i try to require it in my angular app (v.1.5.5) angular.module('backEndApp', ['moment-picker']); an Failed to instantiate module backEndApp due to: Error: [$injector:modulerr] error pops up..

Sorry. Problem at my configuration. Solved it. Everything okay with this module and browserify

How do I disable future dates in datepicker? maxDate: in config doesn't work.
Also max-date="'{{todayDate}}'" doesnt work too. It does populate todays date, but bounds are not set.

First of all : Great Work ! It saved my time (many time)

I've localized the moment picker to French.
When I select the day in the picker, the hour popup is displaying with hours from 00:00 to 23:00 (it is normal)
but when I choose 15:00, the next popup displays minutes from 3:00 to 3:59.
It should be from 15:00 to 15:59

Did I miss something ?

Regards

Very smooth and smart picker. One issue that i noticed is decade view is not working for me. And its not even working on builder example.
http://indrimuska.github.io/angular-moment-picker/

I cant see year selector in the picker.

Currently, you have a dependence on Angular "~1.4.3". From my point of view (and with my manual testing), the current version works perfectly fine with Angular versions above 1.5 as well.

For that reason, I propose to update your bower.json to a later version of Angular.

Hello,

You have done a really good work on that AngularJS picker.

I think there is something missing, and that could be very usefull. Or maybe I just didn't find it.

The format of the date you are displaying for the user is generally not the same as the format you want to save in your database.

So I think it will be interesting to define another format for the saving, and a ng-model to populate with that value, for example to fill an input hidden.

So the input text will contain for example "July 15, 2016 10:35:14 AM"
And the input hidden (for the database) : "2016-07-15 10:35:14".

Do you think it's a feature you could add ?

Best Regards,

would be great

I am having difficulties with locales at the moment.
I am using angularjs 1.4.4. and I just thought of using your directive for solve conversion issues.
I have install through Bower momentJS and included in my javascript moment-with-locales.
My issue is that whenever I try to set my locale to France (by using 'fr') the date coming from the model that is printed always shift back to a default format that looks like the following Fri Jan 01 2016 01:00:00 GMT+0100 (CET) instead of the format given which is 2016-01-01, but when I select a date on the picker, it prints correctly.

Here are snippets of my code (the different scripts are big so I cannot share the whole thing):

index.html

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- <base href="/wsh#/" /> -->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.min.css" />
    <link rel="stylesheet" href="bower_components/angular-moment-picker/dist/angular-moment-picker.min.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/styles.css -->
    <link rel="stylesheet" href="styles/styles.css">
    <!-- endbuild -->
  </head>
  <body ng-app="myApp">
  <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <!-- quantity of library -->
    <script src="bower_components/moment/min/moment-with-locales.js"></script>
    <script src="bower_components/angular-moment-picker/dist/angular-moment-picker.min.js"></script>
    <!-- endbower -->
    <script src="bower_components/messageformat/locale/fr.js"></script>
    <script src="bower_components/messageformat/locale/en.js"></script>
    <!-- endbuild -->
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="https://code.angularjs.org/1.4.4/i18n/angular-locale_en.js"></script>
    <script src="https://code.angularjs.org/1.4.4/i18n/angular-locale_fr-fr.js"></script>
    <!-- quantity of scripts -->
    <!-- endbuild -->
</body>

app.js

angular.module('washingtonApp', [
                                 'pascalprecht.translate',
                                 'moment-picker'])
.config(function ($stateProvider, $translateProvider, $translatePartialLoaderProvider, toastrConfig, momentPickerProvider) {
    $stateProvider.state('root', {url: '/:navId', abstract: true, template: '<ui-view/>'});
    $translatePartialLoaderProvider.addPart('core');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: '/i18n/{part}/{lang}.json'
    });
    $translateProvider.usePostCompiling(true);
    $translateProvider.useMessageFormatInterpolation();
    $translateProvider.fallbackLanguage('fr');
    $translateProvider.useSanitizeValueStrategy('escapeParameters');
    angular.extend(toastrConfig, {
        closeButton: true,
        autoDismiss: true,
        maxOpened: 10,
        showDuration: 300,
        newestOnTop: false,
        positionClass: 'toast-bottom-right'
    });
    momentPickerProvider.options({
       /* Picker properties */
       // locale:        'fr',
       format:        'YYYY-MM-DD',
       startView:     'day'
   });
})

in a view

<input ng-model="vm.contract.signature_date" moment-picker="vm.contract.signature_date" placeholder="{{'PLACEHOLDERS.DATE' | translate}}" name="signatureDate" id="signatureDate" aaf-label="{{'CONTRACT.EDIT.SIGNATURE_DATE'| translate}}"
                                    waaf-group-class="col-md-4 col-xs-5" waaf-valid-hlp-block="pages/contracts/date-messages.hlp.html" max="{{vm.today}}" required/>

additionally I tried to set a watcher on this input, that look as the following:

scope.$watch(function(){ return ctrl.contract ? ctrl.contract.signature_date : null; }, function(newValue, oldValue){
                if(newValue === oldValue || !newValue){
                    return;
                }
                newValue = moment(newValue).format("YYYY-MM-DD");
                ctrl.signature_date = newValue;
            });

<input locale="window.localStorage.lang" ng-model="stockIn.pre_in_time" moment-picker="stockIn.pre_in_time" type="text" class="input-xlarge" required>

error when picked datetime :

angular.min.js:107 TypeError: Cannot read property 'longDateFormat' of null at c (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:4579) at String.replace (native) at L (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:4650) at va (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:9797) at Aa (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:11147) at za (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:10886) at Ca (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:11581) at Da (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:11615) at a (http://192.168.0.121:4040/web/erp/bower_components/moment/min/moment-with-locales.min.js:1:202) at Object.fn (http://192.168.0.121:4040/web/erp/bower_components/angular-moment-picker/dist/angular-moment-picker.js:435:27)

Hi,

I'm trying to take today's date as the min-date. However I cannot manage to make it works...
Here is my html :

<div class="input-group" moment-picker="vm.date" format="ddd Do MMM YYYY" min-view="year" max-view="month" start-view="month" locale="fr" min-date="vm.today">
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
                <input class="form-control" placeholder="Select a date" ng-model="vm.date" ng-model-options="{ updateOn: 'blur' }">
            </div>

and the vm.today attribute
this.today = this.$moment().format("ddd Do MMM YYYY");

Thanks a lot for your help !

I would like to allow manually typing the date into the input.
Currently it completes the date after the first key stroke using the typed number as value for whatever is the first unit for the chosen date format. Example: my format is YYYY-MM-DD, I press "5" and it completes to "0005-01-01".

Is this something you'd consider adding/accepting in to the library?

I would like to request putting the locale property under watch to allow changing the language dynamically.

Currently I set the local property to my controller's view model's property like this:
data-locale="{{ctrl.data.momentPickerLanguage}}"

When I change my app language I set the new value to this view model's property e.g. 'en' but the input field text does not refresh the language.

Thank you.
George

As in title.

How to date and time?

DD/MM/YYYY hh:ii:ss

What format?

Hi,

Currently the datepicker view filtering only goes up to "Year view" where you can select the months. Adding the ability to go an additional step back and select from an range of years is essential when selecting for example a date of birth.

Thanks, Bruno.

for some reason version in bower shows 0.5.1 and it downloads totally different codebase

I have 2 input field on the right side of the screen . So when I select the last input field which is to the end of the screen the datepicker is going out of bounds of the viewport. How can I fix this?

Here is the pluncker

Hi, thx for your awesome work, your moment picker is pretty useful.

However im facing a problem in this scenario :

I have two dates, the second one is based on the first one (let's say : date b always = date a + 2 hours)

So when i change the first date, the change event is triggered and the second date must be updated. In this case, my model has the correct value but not the calendar value. The tricky part is that the change applies on the calendar once i set the focus on another field.

Might be related to #17

Thx for your help.

Hi

I am working with moment-picker in forms and when I make a change to one of my input that has a moment-picker associated to it I noticed that though the date has changed and is displayed in the input, the model does not seem updated in all the case and the form (or the element with the moment-picker) stays pristine, maybe I am missing something.
Here is the code displayed:

I took a picture of the code instead of the actual code to give you an idea of it as it is somewhat complex!

I really don't get what is going on, surely I am missing something.
And I don't know what is the use of the style attribute in the tags...

I am using angular-xeditable with angular-moment-picker. I have the moment picker working on the xeditable text fields. The issue I am having is when I select a time the minutes are being lost. This onlt seems to happen when using a format with the picker. What is odd is the fact that this does not happen all the time or on all the controls I have the picker bound to. Currently I have the picker bound to multiple controls.

I have the following error when using moment-picker and batarang on chrome:
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
I disable batarang to fix the issue, so it's no more a blocking issue. I just sent this post to avoid others spending hours to figure out where these errors are coming from.

Thanks for your good and useful work, I have one issue which is using Jalali date in your picker. And also there is Jalali Moment which is Jalali version of moment.js.

Please kindly help me come up with this issue.

Bonjour :

<div moment-picker="meeting" format="HH:mm A" change="$ctrl.onChange(newValue, oldValue)">The meeting starts at {{ meeting }}.</div>

self.onChange = function() {
       console.log($scope.meting);
};

console.log return the old value . Is this normal ?

Hi,
Great directive first of all. Newbie question: how can I console.log the value of selected date in a very simple way?
plunker https://plnkr.co/edit/n8HlCN?p=preview

var myApp = angular.module('myApp', ['moment-picker']); results in a NOMOD error and failure to run.

It only takes a quick glance at the source to notice that the module name is momentPicker and not moment-picker - and indeed var myApp = angular.module('myApp', ['momentPicker']) works fine - but to have the name of your module wrong at the top of your readme is an inexcusable oversight IMO.

Hi,

I am trying to build my project and it fails on the css of this library (csso gulp). It specifically points to these lines:

moment-picker { position: relative; }
.moment-picker .moment-picker-contents { cursor: pointer; }
.moment-picker .moment-picker-container { color: #404040; min-width: 15em; background: #fff; padding: 4px; border: 1px solid #f0f3f4; border-radius: 4px; position: absolute;
    top: 100%; margin-top: 4px; margin-left: -.5em; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); z-index: 5; }
.moment-picker .moment-picker-container:before,
.moment-picker .moment-picker-container:after { content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; border-top: none; position: absolute;
    top: -9px; left: 15px; }
.moment-picker .moment-picker-container:before { border-bottom-color: #f0f3f4; border-width: 9px; }
.moment-picker .moment-picker-container:after { border-bottom-color: #fff; margin-top: 1px; margin-left: 1px; }
.moment-picker table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }

When I run the code through a css validator (https://jigsaw.w3.org/css-validator/validator) I get the following errors:

URI : TextArea
7 .moment-picker .moment-picker-container:before, .moment-picker .moment-picker-container:after Lexical error at line 7, column 31. Encountered: "?" (63), after : "" ;??}
9 .moment-picker .moment-picker-container:after Lexical error at line 9, column 110. Encountered: "?" (63), after : "" ;??}

Any idea?

When I click on moment picker after load as inline fancybox, it outputs empty picker box.
But if I click on a picker in input directly - all works fine.
Ho to fix?

Just noticed this in the most recent commit. I can't always open the picker, and when I do, the click doesn't actually change the scope variable.

Hi indrimuska

First at all I would thank you for this great date-picker, it's awesome!

I have a problem with the styling of the picker: Everything works fine with the style, I have only the question, is there a class or somethin else, which can style the current day. For example: Today is the 02.05.16, but i select the 05.05.2016. So I would style the selected and the current day in the same time. So I can see the todays date and the selected. At the moment I only style the selecet. Is there a specific class for styling the current day. I often saw such classes for todays date in other date-picker plugins.

It would be great if you can help me.

Greetings
MrBuggy :-)

Hi,

I am getting the following exception:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'format', can't be found!

when using:

<div class="picker hour-picker" moment-picker="task.dueDate" format="LT" min-view="day" max-view="hour" start-view="day">
    <div layout="row" layout-align="start center">
        <i class="s18 icon icon-clock"></i>
        <span>{{task.dueDate | date:'shortTime'}}</span>
    </div>
</div>

If I remove the format="LT" the exception goes away. Any ideas?

If the model value is changed programmatically at some point after the directive has first been loaded, the calendar will not render and thus the wrong month will be selected.

This is caused by angular-moment-picker.js#L446

If the model value has been changed programmatically, the watch on model will fire which in turn causes this watch to fire, but newValue and oldValue will always be the same in this case, and thus it won't render.

Cancelling my question below, as I discovered that this issue was specific to my specific implementation and was able to solve the issue, so no bug to report here. :)

Hello there,

I am running into an issue whereby the calendar that pops up upon me clicking on the input field has the beginning of the following month inserted into the calendar along with the last day of the following month. The bug only occurs for the current month, and when I navigate to the following month, the calendar displays correctly.

I know that's confusing, so you can check out the attached screenshot to see what I mean.

Unfortunately, since I am working in a very large codebase with many files possibly affecting the datepicker part of the application, I am not able to put together an online example, however, here is how I am calling it:

<input type="text" name="{{'date' + exceptionHour.$originalIndex}}" ng-model="exceptionHour.date" moment-picker="exceptionHour.date" format="YYYY-MM-DD" start-view="month" max-view="month" ng-required="exceptionHour" ng-model-options="{timezone: 'UTC'}" ng-resource="exceptionHour" lo-hour-exception-overlap items="hours.$exceptions">

Has anyone run into this issue before?

Thanks!

When displaying February 2016 month view, the dates are not displayed properly.

Similar issue occurs with subsequent February/March months. May be due to February having a different number of days each year..?

The datepicker always transforms the model into a String according to format. The format should be only the way to visualize the model but NOT the stored format.

<div moment-picker="currentUser.dateOfBirth" format="L" start-view="decade" max-view="day" class="form-control"></div>

dateOfBirth = should by type Date oder moment(). How do I get the date object without parsing it again back with moment.js?

$ bower install moment-picker
bower ENOTFOUND Package moment-picker not found

I would love to be able to install this via bower. What am I missing?

Trying to set the min date and max date dynamically by angular expression but doesn't work. Only hardcoded values works.

this is the code:

data-min-date="'{{::ctrl.data.minDate}}'"
data-max-date="'{{::ctrl.data.maxDate}}'"

and in the controller's constructor:

this.data = {
            minDate: moment().subtract(24, 'hours').format('LLL'),
            maxDate: moment().format('LLL')
        };

inspecting the rendered component looks like this:

<div class="input-group ng-isolate-scope moment-picker-contents" data-moment-picker="ctrl.data.dataFrom" data-locale="en" data-format="LLL" data-min-view="day" data-min-date="'June 12, 2016 11:00 AM'" data-max-date="'June 13, 2016 11:00 AM'" data-today="true">
                            <span class="input-group-addon">
                                <i class="fa fa-clock-o" aria-hidden="true"></i>
                            </span>
 <input class="form-control input-sm ng-pristine ng-untouched ng-valid ng-not-empty" placeholder="Select a time" data-ng-model="ctrl.data.dataFrom" data-ng-model-options="{ updateOn: 'blur' }">
 </div>

which looks fine but the picker allows me to select any date freely.

Hardcoding this values to html makes it work but that's just not an option.

Thank you.
George

Maybe an option to set the position from the document/window instead?

Hi @indrimuska,

The issue happens when I first load the page, fetch my data then fill the model. The change event is fired after every page load.

$scope.$watch('value', function (value, previous) {
                if (!angular.isDefined($scope.valueMoment)) return;
                var oldValue = $scope.model,
                    newValue = $scope.valueMoment.format($scope.format);
                if (newValue != oldValue)
                    $timeout(function () {
                        $scope.view.update($scope.view.moment = $scope.valueMoment.clone());
                        $scope.model = newValue;
                        if (angular.isFunction($scope.change))
                            $timeout(function () {
                                $scope.change({ newValue: newValue, oldValue: oldValue });
                            }, 0, false);
                    });
            });

In this code, you compare the newValue with the oldValue as string, but sometime this code compare "2016-07-29 06:50:00-04:00" and "2016-07-29T10:50:00Z". Since, they are different string it fired the change event.

I propose that you compare directly the date object, like in my example below, to solve this problem (in my case it now work fine):

if ($scope.valueMoment.valueOf() != moment(oldValue).valueOf())