Docs require an update to reflect the new nomenclature of the theme files and css files and also js files

Thanks for your awesome work :)
I'm using your component in my project.
I found that there is a transparent area between the heading of the modal and body of the modal when running on mobile devices. (Test on both latest version chrome and safari on iPhone 5s, also happened in the responsive mode in the development console of Chrome and Safari.)

Thank you.

I'm having an issue implementing the date time picker on IE11.

I have an input area and icons to toggle the dialog. The page loads just fine. However, when you click the icon, I get an Object doesn't support this action error. We've debugged it to find that the error occurs when reaching

onCancel = new CustomEvent('onCancel')

in this section:

key: '_attachEventHandlers', value: function _attachEventHandlers() { var me = this, ok = this._sDialog.ok, cancel = this._sDialog.cancel, onCancel = new CustomEvent('onCancel'), onOk = new CustomEvent('onOk');

Are you aware of this issue? How do I get around this?

In the light of recent bugs, it is imperative that this project requires some test cases. This issue is open to any suggestions (and why choose that framework)

After selecting the hour, if you click the same minute number that is highlighted with white, the digital clock breaks and says ":0undefined"

Is there a way to implement time selection followed by date selection which returns the combined date and time?

`$(document).ready(function(){

toggleButton = document.getElementById("OBJECT_ID");
dialog = new mdDateTimePicker["default"]({
type: 'date',
type: 'time', # If you wanna TIME
future: moment%28).add(1, 'years'), # Optional
trigger: toggleButton # Optional
});
toggleButton.addEventListener("click", function() {
return dialog.toggle();
});
toggleButton.addEventListener("onOk", function(e) {
return this.value = dialog.time().format('L');
});

});`

This doesnt work for me.

IE11 bug.

When the page has/or had a scroll-bar it's not possible to click on the dates.

On the image attached, in IE Dom Exp., the mouse is placed over a date, but it's the parent which is selected.

Any clues?

kind regards,
Jakob

Feel free to add your project/app/link to this issue to add it to website showcase section which is coming soon!

Issue Templates

• Search the currently opened issues and past issues before posting a new one.
• Escalate issues by making a reaction of 👍 at the first comment on the issue (the issue author's)
• Be clear and try to open an issue with one problem at a time (open multiple issues if you have multiple problems)

In md-date-time-picker you have a statement:

import Draggabilly from 'Draggabilly'

which translates to require('Draggabilly'). The problem is that it throws an error:

cannot resolve module 'Draggabilly'

because the library name should be lowercase. Manually changing to require('draggabilly') in dist folder solves the issue.

I use Ember 2.4.5 and if I write

var dialog = new mdDateTimePicker({
type: 'date'
});

I get 'Uncaught TypeError: mdDateTimePicker is not a constructor'
Any help?

It would be nice if you could mark an array of dates (e.g. holidays or weekends) in the date picker. The array of dates should just get a css-class like mddtp-picker__cell-marked or something similar to today and disabled dates.

Click on the year in the header, the years view appear, select a year and click ok. The datepicker close with the following error :

TypeError: currentYear.scrollIntoViewIfNeeded is not a function

Hi, That would be nice if we could also see the timepicker on demo. Thanks

This is a simple change and would be really useful for people who are using MDL SASS with a custom color theme.

In _global.scss:

$primary-color-palette: $palette-teal;
$accent-color-palette: $palette-lime;

Change to:

$primary-color-palette: $palette-teal !default;
$accent-color-palette: $palette-lime !default;

When i initialize the timepicker object with a time in the evening, for example 5:30pm, when i change the hour to 12 i.e. 12:30 and click ok the time comes back as 12:30am instead of 12:30pm

Hi @puranjayjain!

First of all: Thank you for this really awesome library!

The image paths inside the theme files are incorrect. It says: ../images/ic_keyboard_arrow_left_black_24px.svg, which would work for the base css, but doesn't work for themes, as they are deeper down the directory structure.

How can md-date-time-picker be used with Webpack? Any examples?

Need to fix

• docs (add real life use case e.g with input text)
• time picker on portrait mode
• force portrait mode option
• dialog z-index 99999
• line height issue in h2 and h4 (replace them with div and then style them)

Argument for setting the 'OK' and 'Cancel' labels

This way the picker can be configured for other languages.

Divide hours in two circles, outer circle with hours from 1 to 12 and inner circle with hours from 13 to 00.

This is how the picker is on Android apps, this way the hours would be more spaced and better for clicking, specially on mobile devices. And it looks better. =)

im trying to use your awesome work in my project, but im failing hard...

im using webpack and babel for use of es6...

none of these methods worked for me :/

import 'md-date-time-picker/dist/js/md-date-time-picker';
var mdDateTimePicker = require('md-date-time-picker/dist/js/md-date-time-picker');
import mdDateTimePicker from 'md-date-time-picker/dist/js/md-date-time-picker';

i see you are not exporting a default in your js, maybe thats the problem, but i think importing the dist version should work then...

any help is appreciated!

It is currently not possible to detect when the datepicker / timepicker is closed (i.e. the cancel / ok button is clicked). It would be great to have an event fired when the picker is closed.

Thanks for your effort on this nice date picker. It works great on Mac Book Pro with Chrome. However, there is a problem on my 4" iPhone 5 with Safari. The resolution is 1136 x 640.
As the attached screenshot, the OK and Cancel button is out of the screen. There is no way to dismiss the picker dialog.

Please help to adjust the margin between the dates and the button. Thanks a lot.

This appears to be a well designed component and is exactly what I'm looking for but I'm having some issues in IE.

I tested this in Internet Explorer 11. (Browser support says: Internet Explorer 8. I assume this is supposed to mean 8+.)

Opening the included demo.html in IE 11 results in all of the dialogs opening immediately. If I correct that issue by creating the mdDateTimePickers right before performing the toggle, the time picker does not work correctly.

In your documentation, it has the following example for handling the ok event. In the example below, I can't see where x comes from.

    // assuming test1 is an input text element
            document.getElementById('test1').addEventListener('onOk', function() {
              this.value = x.time.toString();
            });

I have looked through the code and it uses a custom event but the custom event doesn't have any type of date/value payload.

	_attachEventHandlers() {
		let me = this
		let ok = this._sDialog.ok
		let cancel = this._sDialog.cancel
		// create cutom events to dispatch
		let onCancel = new CustomEvent('onCancel')
		let onOk = new CustomEvent('onOk')
		cancel.onclick = function() {
			me.toggle()
			if (me._trigger) {
				me._trigger.dispatchEvent(onCancel)
			}
		}
		ok.onclick = function () {
			me._init = me._sDialog.sDate
			me.toggle()
			if (me._trigger) {
				me._trigger.dispatchEvent(onOk)
			}
		}
	}

How do you get the selected date from the onOk event?

The build file gulpfile.js is very bulky right now. It should be broken down into small scripts with the main gulpfile.js

Hi @puranjayjain

I've faced with the fact that you are using the images for icons.

Why not just use material icons module:

• https://github.com/google/material-design-icons
• https://design.google.com/icons/

Would it be possible to expose the hide and show dialog methods in the public API? Having just a toggle method does not work for all use cases. An example is when tabbing through multiple date fields things get messy with just a toggle method.

• "OK" is directly triggered by selecting a date or time
• "Cancel" could be triggered by an "x" button on the top right

This would make the view smaller and thus would work better on smaller devices.

Also related to #68

dialog.trigger = document.getElementById('someElement'); must be typed before document.getElementById('test1').addEventListener('onOk', function() { this.value = x.time.toString(); });

Error occurs when I select '24', press 'OK', open again the picker and try to select another hour.

Also when I select '24' for the first time and select any minute, when it goes back to the hour view the '6' is selected.

I may have missed something, but when using the dist library on 3fc44ba I needed to include a CustomEvent polyfill for IE11.

Hi! thanks for an awesome date-time picker. It's just what I was looking for and it took just 5 minutes to integrate it in my MDL-React website.

However, I noticed there is an inconsistent behaviour in the time picker when in 12-hour mode and selecting time like 12:15AM:

1. say the initial time is set to 9:30AM
2. click on 12 when selecting hour - time changes to 12:30AM
3. click on 15 when selecting minute - time changes to 12:15AM
4. click OK - time returned to the callback is 12:15PM.

I traced the issue to this piece of code:

hourView.onclick = function (e) {
 ...
    if (me._mode) {
        setHour = parseInt(e.target.textContent, 10);
    } else {
        if (me._sDialog.sDate.format('A') === 'AM') {
            setHour = e.target.textContent;
        } else {
        setHour = parseInt(e.target.textContent, 10) + 12;
    }
    }
...
}

changing it to setHour = e.target.textContent%12 and setHour = parseInt(e.target.textContent, 10)%12 + 12 respectively fixes the issue.

I'm toggling open a time dialog after the onOk event and it works fine in Chrome but nothing triggers in IE11.

I'm using the CustomEvent polyfill from https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent.

input.addEventListener('onOk', () => {
    console.log('I don't trigger in IE11');
}

For now I've overridden mdDateTimePicker.default.prototype._attachEventHandlers with

function () {
    var me = this,
        ok = this._sDialog.ok,
        cancel = this._sDialog.cancel

    cancel.onclick = function () {
        me.toggle();
    };
    ok.onclick = function () {
        me._init = me._sDialog.sDate;
        me.toggle();
        if (me.callbacks) {
            me.callbacks.forEach(function(callback) {callback()});
        }
    };
}

and pass in the toggling function but it feels a bit ugly.

I use this js and I live in Korea.

I'm so glad to support i18n.

And datepicker is working good.

But timepicker occured error when open the dialog.

I tracing this error and find on below line.

https://github.com/puranjayjain/md-date-time-picker/blob/master/dist/js/mdDateTimePicker.js#L466

It always needs return AM or PM. but antother country using their languages.

in Capture images, second line means "PM", but not found element.(find element this._sDialog[m.format('A')] -> this._sDialog['오후'] NOT PRESENT)

Hi!

Awesome component!

What do you think about supporting this event mdl-componentupgraded ?

With mdl snackbar component i do stuff like this :

(function () {
    var snackbar = document.querySelector("[class*='{{.ClassName}}']");
    if (snackbar) {
      snackbar.addEventListener('mdl-componentupgraded', function(){
        var data = {/*...*/};
        snackbar.MaterialSnackbar.showSnackbar(data);
      }, true)
    }
})();

Doing so i don t need to :

• rely on document.ready event
• i m safe do apply some logic when the component is really ready (document.ready is not safe)
• i don't need to put my owns scripts after the lib script (as described in https://puranjayjain.github.io/md-date-time-picker/#scroll-tab-2)

The Moment.JS link is wrong here:
http://puranjayjain.github.io/md-date-time-picker/#about/tools

It's pointing at http://puranjayjain.github.io/md-date-time-picker/momentjs.com instead of http://momentjs.com.

*time & trigger is not a method
*update example with above changes
and may be others )

I did an npm install of the latest version (2.2.0) and I get a webpack warning that

.//draggabilly/draggabilly.js and
.//Draggabilly/draggabilly.js

have the same name when the case is ignored. I did not have this issue on 2.1.0. Has anyone seen this before?

Good day,

I just downloaded the latest version and I am trying to run demo.html

I cannot get it working. I open the webpage and click on the buttons but nothing happens.

Am I doing something incorrectly or should I be doing it another way?

Thanks

Using the chrome inspector with device emulation turned on, through Safari in the iOS Simulator (Bundled with XCode, on OS X), as well as on various Android and iOS physical devices, dragging the minute hand of the Time Picker, the dragging functionality doesn't seem to work.

This issue is present on the example page when you click "Toggle Time Dialog" at https://puranjayjain.github.io/md-date-time-picker/

Would it break the MD guidelines if we were to implement a "close calendar when clicking on the page" ?

What I mean, if I hope the calendar and want to dismiss it, by clicking anywhere else on the page (but the calendar), it would close it.

Maybe we should activate that option only when "autoClose=true".

@puranjayjain Let me know what you think !

Hi @puranjayjain,

I run the component in Aurelia, but it gives an error: Cannot read property 'firstChild' of null.

Regards.

• Date format of
  • Selected date
  • Current month
• First day of week (in many locales, Monday is the first day of week)

Format for date

i tried toDateString() , toLocaleDateString()
.toString('yyyy-MM-dd') , getDate() , getMonth() , getYear()
none work,

how to make it become mm-dd-yyyy or yyyy-mm-dd ?
thanks

HI ,

now this project seem to can pick past day only..

can this project pick the future day only??

or not limit for pick.

Hi there, while playing around with this great project I'm getting the above exception.

Steps to reproduce:

• Open the default datepicker: // new mdDateTimePicker.default({type: 'date'});
• Multi-click on the previous or next month arrow icon fast enough (5 clicks per second)
• At some point, rather sooner than later, the API will break and the above exception will be thrown. As a result in the DOM the li.mddtp-picker__view element will start to grow.

It'll be great to have this issue fixed as this is a fairly easy-to-reproduce bug.

Thanks in advance.