how to customize PopupDateField

Hopefully a simple question.
How would one go about displaying the PopupDateField's icon on the left side of the text input rather
than the right?
Thank you.

Hi,

Might be trickier than you think, but I'd go and try the following CSS:

.v-datefield-button {
   float: left;
}

You'll probably need to tweak the styles a bit more to make it look OK, but otherwise the button should now be on the left side of the widget.

Be sure to test it on as many browsers you can ;) (read: IE gives me the "heebie-jeebies").

Thanks for your response.
Like you stated, this does not render nicely in all browsers and I seem to need a different image/resource now.
Shouldn't this be supported by the component?
How could I extend the component to support this?

As I suspected.

But I just realized it would work better across browser like this:

.v-datefield-textfield {
    float: right;
}

In order to correct the other style problems you need to mirror these two images, popup-btn.png and popup-btn-pressed.png, and add some more CSS (assuming a stylename "foo" is used to alter the look):

.v-datefield-foo .v-datefield-textfield,
.v-readonly .v-datefield-textfield {
	border-right-width: 1px;
}

.v-ff .v-datefield-foo .v-datefield-textfield,
.v-ff .v-readonly .v-datefield-textfield {
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.v-sa .v-datefield-popupcalendar .v-datefield-textfield,
.v-sa .v-datefield-popupcalendar .v-textfield-readonly {
	border-width: 3px;
}

.v-datefield-foo .v-datefield-button {
	background-image: url(path/to/mirrored-popup-btn.png);
}

.v-datefield-foo .v-datefield-button:active {
	background-image: url(path/to/mirrored-popup-btn-pressed.png);
}

I didn't test any of this, but in theory those should cover it.

This works. Thank you for your help.

No problem, glad I was of help!

PS. All theme related questions, such as this, should go to the "Themes" category. But I guess it's not always easy to know if it's a theme issue or not.