Which of these is a better approach for placement of the date picker button:
Having the button outside the right bounds of the other textboxes:
Or having the picker inside:
I'm also thinking of moving the mm/dd/yyyy and phone hint to use the input placeholder attribute, but am not sure about support for older browsers (IE8/IE7).
Ultimately I think this one comes down to personal preference and design considerations. There are arguments for both. With the first the input boxes line up, with with the second the examples line up. In this situation the solution has to be to present both designs to the customer and see which they prefer. If you are the customer then...
However, can you set it up so that the date picker is inside the date text box?
However, this might be ruled out by your UI design tools.
Does your date selector automatically trigger when the user focuses on the text field? If so then, I would go with having the 'calendar' icon inside the text field as well like @ChrisF has suggested.
Some users may perceive the calendar icon to be a link to trigger the date selector, so if it is outside they have to move their mouse to click it. Unnecessary action.
Also why do you need to mention 'mm/dd/yyyy' when there is a date selector to select the date in the correct format? can be done away with imho unless you are looking at cases where javascript is disabled.
So basically, if you can't have the calendar icon inside the input field because of UI limitations, then go with your option#1 and remove 'mm/dd/yyyy'
As for 'placeholder', you can refer http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/ for info on browser support and work around.
