Picker icons cause layout issues, show-icon enables too many options about angular-material-datetimepicker HOT 8 CLOSED

Ok I will add a show-clear option.

from angular-material-datetimepicker.

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.

from angular-material-datetimepicker.

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

from angular-material-datetimepicker.

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"
			)

from angular-material-datetimepicker.

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.

from angular-material-datetimepicker.

show-clear is working perfectly btw. Thanks again

from angular-material-datetimepicker.

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

from angular-material-datetimepicker.

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

from angular-material-datetimepicker.