Use DateRange in Frappe Page

Hello everyone,
I am trying to use the daterange field used in the filter tab of doctypes in a frappe page.

I have identified the relevant HTML file as

<input type="text" autocomplete="off" class="input-with-feedback form-control input-xs" data-fieldtype="DateRange" data-fieldname="date" placeholder="">

but I am currently having issues instantiating this field properly.

Please is anyone aware of changes what changes I can make to use this?

I can use a third party daterange js library, but I am trying to make that a last resort.