jQuery UI datepicker widget in DFFS

[Alexander Bautz]

I have got this question a few times now, and decided to post it here for future reference. All you need to do is to edit the file “DFFS_frontend_CEWP.js.aspx” (the frontend script file you have referred below the form web part) and add this code at the bottom:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
function dffs_Ready(){
	$("#dffs_Date1").find("input").datepicker();
	// You might also want to hide the default calendar icon
	$("#dffs_Date1").find("img").hide();
}
</script>

In this example my date field is named “Date1” – you must edit the id used in the selector in the example to match your field name. You find the FieldInternalName in the table at the bottom of the Misc tab.

To add the picker to more fields, do it like this:

$("#dffs_Date1, #dffs_Date2").find("input").datepicker();
$("#dffs_Date1, #dffs_Date2").find("img").hide();

Alexander

[Author]

Posts