Generally, there are many ways to do it. In this tutorial, I will show you two ways to show date picker on frontend in magento.

Both ways have the same ideas :
Firstly, we must include all javascript and css which are vital for displaying date picker.
As the second, image calendar , input button and generated javascript also need to be implemented on phtml file.

First way :

In your file phtml


Second way :

1/Js and css were embedded in your layout.xml by using the following code :


2/In your phtml file  : inbusiness/checkout/onepage/shipping.phtml  . Put the blow code :



Note : disableFunc() in init js calendar is using for disable previous days in date picker calendar.

Happy coding !