I can't see a igDatePicker specific forum so I hope this is the right place for a query on it.

igniteUI 13.1, MVC5, jquery-1.7.1, jQuery ui 1.8.20

I am using two igDatePickers in my view to capture Start date and an end date for some processing.

Here is the Razor that defines them:

		<div class="float-left-box">
			<h2>Refresh invoice dates from Xeroh2> <div class="float-left-clear-left"> @Html.LabelFor(m => m.InvoiceDateRefreshStartDate, "Start date") @Html.Infragistics().DatePickerFor(m => m.InvoiceDateRefreshStartDate).ID("dpIDRStartDate").DateDisplayFormat(Model.DateFormat).DateInputFormat(Model.DateFormat).InputName("InvoiceDateRefreshStartDate").Width(120).Render() @Html.Infragistics().DatePicker().ID("dpIDRStartDate2").DateDisplayFormat(Model.DateFormat).DateInputFormat(Model.DateFormat).InputName("InvoiceDateRefreshStartDate2").Width(120).Render() div> <div class="float-left-clear-left"> @Html.LabelFor(m => m.InvoiceDateRefreshEndDate, "End date") @Html.Infragistics().DatePickerFor(m => m.InvoiceDateRefreshEndDate).ID("dpIDREndDate").DateDisplayFormat(Model.DateFormat).DateInputFormat(Model.DateFormat).InputName("InvoiceDateRefreshEndDate").Width(120).Render() div> <input type="button" id="btnUpdateInvoiceDates" value="Update invoice dates"/> div> 

When the button is clicked I want to use ajax to call a method in my controller, so I have this jQuery:

<script type="text/javascript"  >
	$(document).ready(function () {
		$("#btnUpdateInvoiceDates").bind({
			click: function (e) {
				$.ajax({
					type: "GET",
					url: "/@XeroSettingsController.ControllerName/@XeroSettingsController.ACTION_UpdateInvoiceDates",
					data: {
						InvoiceDateRefreshStartDate: $("#dpIDRStartDate").igDatePicker("option", "value"),
						InvoiceDateRefreshEndDate: $("#dpIDREndDate").igDatePicker("option", "value")
					},
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: successFunc,
					error: errorFunc
				});
			}
		});
		function successFunc(data, status) {
			alert(data);
		}
		function errorFunc(a,b,c,d) {
			alert('error');
		}
	});
script>  

When the Ajax call is made (or at least, attempted) I get the following error:

Error: cannot call methods on igDatePicker prior to initialization; attempted to call method 'option'

If I debug in Firefox a watch on this expression produces the same error:

$("#dpIDRStartDate").igDatePicker("option", "value")

So this is now driving me bonkers. How to I get the igDatePicker to initialise itself such that I can actually use it?

I am using it with success elsewhere in my site, but as part of a form. The difference here is that I am not using the igDatePickers in an html form.

I can change the dates quite happily on the web page but I still run into this error, so the igDatePicker is up and running, just not initialized.

Regards,

Graeme