The angular-material-datetimepicker cannot be used in a md-dialog because md-dialog cannot be nested yet.

angular/material#698

Deprecation warning: moment().add(period, number) is deprecated. Please use moment().add(number, period).

The datetime picker is being called from another modal popup and is forcing the original popup to close stopping me from returning to the original popup to continue what i was doing. Would it be possible to add a skipHide:true to the date time picker popup modal or some other method to stop the pop up from prematurely closing the parent modal popup?

Hi i have the latest version of angular material datetimepicker but the time picker doesn't display correctly on IE 11,

It is great directive.But I want the user to only select the date and hour.Not minutes.Please solve this problem.

Hi,

Thanks for this great lib!
This is my first time to use this lib and I'm encountering an error.
Here's the error on my browser's console: Error: [$compile:multidir] Multiple directives [input (module: app), mdcDatetimePicker] asking for new/isolated scope on: <input mdc-datetime-picker date="true" time="true" type="text" id="datetime" placeholder="Date" min-date="date" ng-model="dateTime" />

Hope you can help me with this.

Thanks.

Is this working in md-dialog box?
I want to used angular-material-datetimepicker in mg-dialog box.
But, mg-dialog box close when angular-material-datetimepicker time/date picker open.

there is any way to use angular-material-datetimepicker in mg-dialog box?

I have wierd position when open the datetime modal (Appended to top).
http://take.ms/WRLQ6

if i open official demo in IE11 it looks like this for a couple of seconds

For things like date of birth, there needs to be an easier way to choose the year.

I have been trying to place an up/down arrow next to the year, and having it increment or decrement the date by one year when pressed.

The problem is that I'm trying to have that talk to the calendar display to trigger an update so it can re-center over the new date. Any suggestions?

Modifications made:

Modified the template variable:
+ ' <div class="dtp-actual-year">{{picker.currentDate.format("YYYY")}}</div>'
// new lines added below
+ ' <div ng-click="picker.incrementYear(1)">year up</div>'
+ ' <div ng-click="picker.incrementYear(-1)"class="dtp-actual-year">year down</div>'

Function added after the isPM function:

incrementYear: function (amount) {
this.selectDate(this.currentDate.add('year', amount));
}

How do i enable user to select seconds also.

When specifying "DD/MM/YYYY" as format, the datetimepickers date becomes invalid and shows an empty input.
The value I use as date = "2016-05-23T11:20:21.7329621+02:00"

My findings:
Setting the format at line 115: scope.currentDate = moment(scope.currentDate, scope.format); in angular-material-datetimepicker.js, the m.isValid() at line 125 returns false.

Hi logbon72, This module is very good, I like it. However I want to change the default background color to match my app theme. Can you show me how to do that? Thank you.

$mdDialog option 'skipHide: true' is not setted in the Dialog config object. This option allows the datetime picker dialog open above another dialog.

Another interesting config is 'clickOutsideToClose: true', this option allows the dialog is closed when clicked outside or when escape key is pressed.

The md-input-focused class is not being removed from the input-container after the selection is made, which is causing visual inconsistencies on the page after a change has been made to a date field.

Hello,

I'm trying to install it via Bower and I have an issue

ECONFLICT Unable to find suitable version for angular-material

I'm using Angular Material v1.1.1.

Could you please provide instructions how to resolve it?

Thanks,
Alexander

I have tried to integrate your library into my app, but unfortunately the css is not loading properly. When the popup load the css is not being applied to it. I even made sure that the CSS for the popup was loading before bootstrap.
Should I also include other files such as: beautifier.js, and highlights and their appropriate CSS files? Because I did but still not getting what I expected.

Hi,

How can I clear the date from the input field?

Thanks,
Hemant.

Hello,

I don't use bower and I needed to use this package under npm. There was no npm package, but I can see package.json file, so I created it here. I will happily transfer the ownership if you tell me your logins.

Thanks for the plugin!

it should support ng-change.
The workaround is to use a $watch.

It seems kind off heavy to load when using on a modal dialog, takes like 2, 3 seconds to display the clock.

As note, I'm using it with another services and angular templating in the page, that might be slowing it down.

On Internet Explorer 11 timepicker shows empty clock face, I cannot pick the time.

Hi Logbon,

This is a very nice and interactive module. But currently the one of it's dependency (Moment.js) is too old to be utilized. As moment.js updated some of their APIs.

Please update the package with suitable version.

Not an issue but a suggestion

The date picker returns a date object or a moment object to the model and that makes it difficult to submit through a form as compared to when it is a string.

e.g. if the ng-model="response". $scope.response in the controller should be a string (not an object).

The moment or date object is technically not needed. You can use parseDate and formatDate to convert string to date and date to string when the datepicker is opened and a date is selected respectively.

Is there a way to choose type a date instead of automatically open a modal when the input get focused??? Like have a button side-by-side in a input, and the modal opens when the users click that button, but if the user prefer, he can type manually a date/time (like using a directive to mask or something like that)?

Greetings,

Is it possible to add this parameter "skipHide: true" in the $mdDialog.show call?

          $mdDialog.show({
              template: template,
              controller: PluginController,
              controllerAs: 'picker',
              locals: locals,
              openFrom: element,
              parent: angular.element(document.body),
              bindToController: true,
              disableParentScroll: false,
              skipHide: true
            })

This gonna make possible to show the DatePicker modal inside of another modal.

Regards,

Fabio

wow guys, you should test you stuff in IE. Half a planet is using it

I followed the steps here: https://www.npmjs.com/package/bower-webpack-plugin
And I run
bower install angular-material-datetimepicker
Add
require("momentjs");
require("angular-material-datetimepicker");
in entry.js
run
webpack -d --watch
everything is fine. But when I open index.html in the browser, it said
Uncaught ReferenceError: moment is not defined
I try the bootstrap demo in the example. It's works fine. I don't know if I forgot anything else or if there is a bug in angular-material-datetimepicker?
Thanks for help!

there should be an indication on the calendar regarding what date it is today (e.g. a circle around the current date). Currently, current date is circled only right after the calendar is opened, and disappears when I click on another date

Great directive, Thanks for sharing it

how you will hack the directive to allow keyboard support, lets say if i press Alt-H , want to popup this awesome date time picker.

angular.element(elmName).triggerHandler('click');
angular.element(elmName).trigger('click');

none of them work

Using disableParentScroll: false will make the display of dialog incorrect at latest version of Angular Material

Demo: http://codepen.io/anon/pen/VKQWGO

If you change the version to old one, such as 0.7.1, it is correct

I have used jslint it throws me with this error

This is a great plugin. I found a problem when the datetimepicker is triggered on a modal with a form, it closes the existing form and loads the picker rather than open over it like the material date picker does.

I want datepicker calender looks like

Hi can i know how to make 00:59 minute not only multiple 5 minutes , can any options to config this requirement ?

Thank you

In the input box the date time is shown as 2016-06-12 14:10:00 but when I click on the input box to open the datetime picker modal, the time is shown in UTC (in my case UTC-5:30).
So it shows 08:40. How to fix this?

This would be fantastic if we could use it without the popup feature. For example, the Bootstrap UI datepicker will simply display the calendar as-is.

Has anyone suggested this or is there a PR in progress? Nice module

can I display the dateTimePicker with the french language?
I used the angular-i18n library but it won't work...any help please!!!

Hi,
there is any way for store only time value in ng-model ?

I had this working previously on my ionic application. I confirmed this is only on mobile by running ionic serve to run the application in my Mac's Chrome browser. See screenshots below.

Desktop

Mobile Android device

Hi,

There a way to change the language of the months and days?

Is it possible to disable a set of continuous and non-continuous dates in the calendar, as not available dates for selection?

Hi,

After select a date is taking almost 5 seconds to data be showed in the field.

It's an issue? A config?

I would like to load this module via npm.
If I run npm i There is some progress showing up, but I cannot find the package in my node_modules directory.
There are no errors flashing up.

I added this to my package.json file:

{
  "dependencies": {
    "angular-material-datetimepicker": "git://github.com/logbon72/angular-material-datetimepicker#v1.3.1"
  }
}

I'm not sure what is causing this.
Might it be the ignored pattern "/.*" in the package.json?

I'm trying to set the minDate as a string in the HTML. I've tried:
min-date="2016-08-10"
But this doesn't work. Should it be a different format?

If i used min-date and max-date attribute,

while selecting date from other months from default selected date month, the calendar scrolls down to the bottom.

This is because of wrong value of md-top-index in mdcDatetimePickerCalendar directive.

In the line 563 of our js file, we update calendar.topIndex from currentMonthIndex method alone.

var index = currentMonthIndex(nDate);
if (calendar.topIndex != index) {
calendar.topIndex = index;
}

Here we have to subtract calendar.months[0] from currentMonthIndex method to get exact index to set calendar.topIndex so that md-top-index.

So the correct code will be

var index = currentMonthIndex(nDate);
if (calendar.topIndex != index) {
calendar.topIndex = index - calendar.months[0];
}

Kindly fix this issue as soon as possible.
Thanks

I'm trying to use the date picker, I took the code from the examples and added it to my page:

<md-input-container class="col-md-2 col-md-offset-5" flex-gt-sm>
      <label>Time</label>
      <input mdc-datetime-picker="" date="false" time="true" type="text" id="time" short-time="true"
            placeholder="Time" min-date="minDate" format="hh:mm a" ng-model="time" class="md-input">
</md-input-container>

But the clock looks really bad and also the buttons are on the top!

Any idea about what could be the problem?

Hello Guys,

Really good job.

However I want to know is there any way that the output is being set as Timestamp (long) and not as a Date object?

Thanks,
Dhaval

A project that was working fine on 1.5.9 fails to open the date popup on 1.6.1. The following error is generated in the console:

TypeError: Cannot read property 'params' of undefined
at new controller (http://localhost:3000/node_modules/angular-material-datetimepicker/js/angular-material-datetimepicker.js:523:34)
at Object.invoke (http://localhost:3000/node_modules/angular/angular.min.js:43:175)
at R.instance (http://localhost:3000/node_modules/angular/angular.min.js:93:35)
at n (http://localhost:3000/node_modules/angular/angular.min.js:68:42)
at g (http://localhost:3000/node_modules/angular/angular.min.js:60:496)
at g (http://localhost:3000/node_modules/angular/angular.min.js:61:12)
at g (http://localhost:3000/node_modules/angular/angular.min.js:61:12)
at g (http://localhost:3000/node_modules/angular/angular.min.js:61:12)
at n (http://localhost:3000/node_modules/angular/angular.min.js:69:166)
at g (http://localhost:3000/node_modules/angular/angular.min.js:60:496) Possibly unhandled rejection: {}