Picker icons cause layout issues, show-icon enables too many options

[oliversalzburg]

The show-icon attribute causes a calendar or clock icon to be displayed next to the input element. Clicking this icon opens the picker. This is very convenient and I'd really like to enable this for a certain use case I have.

However, this also adds a clear button to the input element, which can have unintended implications. In my case, I don't want the user to be able to remove the time value in the input. IMHO the picker icon and the clear icon should be configurable separately.

Additionally, when the picker is contained in an md-input-container, the label intersects with the picker icon, which originally lead me to try to prevent the element from being cleared by the user.

Additionally, there's a dtp-input CSS class being used in some places, which appears to add a margin on the left of the input element that seems like it's inteded for the above mentioned icons to fit in. However, if you don't apply the style and enable show-icon, the control still looks perfectly fine.

[hexadecy]

Ok I will add a show-clear option.

[hexadecy]

Option show-clear added in: 307a514 v1.19.1
The label should be normally above the input.
dtp-input can be override with a css like: .dtp .dtp-input

Can you provide me a full example? (code) or better jsFiddle.

[oliversalzburg]

https://codepen.io/oliversalzburg/pen/NWKyJrd should showcase the issue with the label intersecting with the picker icon.

Also notice that, when you remove the .dtp-input, it has no effect on how the input is rendererd, which lead me to believe the class is actually redundant.

Thanks for the show-clear! I'll test it out ASAP

[hexadecy]

It's because this picker needs the placeholder attribute.

doctype html
html(
	ng-csp
	ng-app="foo"
	)
	md-input-container.md-block
		label Start
		input.dtp-no-msclear.dtp-input.md-input(
			type="text"
			mdc-datetime-picker
			date="false"
			time="true"
			minutes="true"
			ng-model-options="{timezone: meeting.fair.timezone}"
			format="LT"
			edit-input="true"
			show-icon="true"
			ng-model="vm.meeting.start"
			placeholder="Enter time"
			)

[oliversalzburg]

It's because this picker needs the placeholder attribute.

Oh yeah, that's much better 😀 Thanks for that. What about the dtp-input class though? It seems like it's not doing anything. And if you were to remove the show-icon, it even looks weird for being indented under the label.

[oliversalzburg]

show-clear is working perfectly btw. Thanks again

[hexadecy]

Class like .dtp-no-msclear or .dtp-input are added by the datetime-picker component only when show-icon is "true". Most of the code in this fork is for a special use case.

html(
	ng-csp
	ng-app="foo"
	)
	md-input-container.md-block
		label Start
		input(
			type="text"
			mdc-datetime-picker
			date="false"
			time="true"
			minutes="true"
			ng-model-options="{timezone: meeting.fair.timezone}"
			format="LT"
			edit-input="true"
			show-icon="false"
			ng-model="vm.meeting.start"
			)

Please check examples at: https://github.com/beenote/angular-material-datetimepicker/blob/gh-pages/index.html

[oliversalzburg]

Oh, I see. I just copied directly from https://beenote.github.io/angular-material-datetimepicker/ and didn't think the class would be added by the directive. Thanks