Paso 1:
Añade este código dentro de la <head> etiqueta de tu código personalizado:</head>
Paso 2:
Añade este código dentro de la etiqueta de antes de tu código personalizado:
&lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;&lt;br=&quot;&quot;&gt;&lt;script&gt; &lt;/script&gt;&lt;br=&quot;&quot;&gt;$(&amp;#x27;#datepicker&amp;#x27;).datepicker();&lt;br=&quot;&quot;&gt;&lt;br=&quot;&quot;&gt;
Paso 3:
Primero agregue un campo de entrada -

En segundo lugar, dale una identificación de 'datepicker'...

¿Necesitas más de uno?
Editar: si quieres tener más de un datepicker en la misma página, cambia el #ID en el código personalizado por un .class y dale a cada entrada un ID individual y deberías poder tener más de uno. Por ejemplo, así es como se verían dos selectoras de fechas en su código personalizado:
A continuación, dé al campo de entrada una clase CSS de 'datepicker' con un ID de, por ejemplo, datepicker_1. Luego, si desea agregar otro, dele el mismo nombre de clase y un nuevo ID único, por ejemplo datepicker_2.