SharePoint ParameterBinding the DateTime Control

Scenario

• You have a custom form providing values to an XsltListViewWebPart or similar List View Web Part that supports ParameterBinding.
• You need to provide a date picker control and would like to use the standard SharePoint control.  You only need the date, not time.
• You are using SharePoint Designer and may not have access to code blocks or other server side code.
• You are using the ParameterBinding in a CAML Query or similar.

Issue

• The SharePoint date picker control is easy enough to add directly to a SharePoint aspx page, but accessing the values from the Form or Control ParameterBindings are not straightforward.

Resolution

• Add JQuery and JQuery formatDateTime libraries to the page you are working on if they're not already included in your master page.
• Example where you have downloaded the jquery and formatDateTime files to the root Style Library:
  

  <script language="javascript" type="text/javascript" src="/Style%20Library/Scripts/jquery-1.11.3.min.js"></script>
  <script language="javascript" type="text/javascript" src="/Style%20Library/Scripts/jquery.formatDateTime.min.js"></script>

• Add the DateTime control followed by a standard TextBox element with the Same ID + "Value". 
• This extra TextBox control will be used to pass the value to the ParameterBinding and should be hidden.  You should specify the date you wish to use when a blank is entered (be sure to change both).  The OnValueChangeClientScript property is used to call the JavaScript function you will add next.
• Example:

  <SharePoint:DateTimeControl runat=server id="publishDateStart" OnValueChangeClientScript="spDateChanged('publishDateStart', '1901-01-01');" DateOnly="True"></SharePoint:DateTimeControl>
  <asp:textbox id="publishDateStartValue" runat="server" style="display: none;">1901-01-01</asp:textbox>

• Add the following JavaScript code.  This converts the DateTime control's date format to the format required by your XSLT CAML query and stores it in your hidden textbox.  It also swaps in a date for a blank.
•  Code:

  <script type="text/javascript">
  function spDateChanged(id, blankdate) {
  var datetimeID = '"_' + id + '_' + id + 'Date"';
  var dateSelected = $('[id$=' + datetimeID + ']:first');
  var dateSelectedValue = $('[id$="' + id + 'Value"]:first');
  if (dateSelected[0].value == "")
  {
  dateSelectedValue[0].value = blankdate
  }
  else
  {
  dateSelectedValue[0].value = $.formatDateTime('yy-mm-dd', new Date(dateSelected[0].value));
  }
  }
  </script>
  

• Set your ParameterBinding element to the TextBox Control's ID
• Example:

  <parameterbinding defaultvalue="" location="Control(publishDateStartValue)" name="AdoptedFrom"></parameterbinding> 

• Note that this example does not include the time elements since it was not needed in my use case and would add in some extra complexity to the function above.  This was written for a 2010 SharePoint Server.
• Also note that typed in entries need to be in the "m/d/yyyy" format.  Example: 1/1/2015