SlickGrid dynamically building cols from dates error

Question

I am trying to take a start date and and end date from a datapicker, then use the start date and enddate to create a list of column dates, when I hardcode the dates in this works fine, however when I try and get the dates from the date pickers they both return null, here is some code (I am also using MVC3 and Razor, but I think this is a JS thing I am doing wrong.).

using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

<p>
    Start Date:
    <input id='datepicker' name='datepicker' style="width: 85px">
    End Date:
    <input id='datepickerend' name='datepickerend' style="width: 85px">
    @Html.ListBox("teamID", (SelectList)ViewBag.Teams, "--Select a Team--")
    @Html.DropDownList("dealID", (SelectList)ViewBag.Deals, "--Select a Deal--")
    <input type="submit" value="Filter" id="btnFilter" />
</p>}



<script type="text/javascript">

function FormatUkDate(dateStr) {
    dateStr = dateStr.split("/");
    return new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
}
</script>
<script type="text/javascript">
Date.prototype.addDays = function (days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}

function getDates() {
    //        var StartDate = new Date(FormatUkDate($('#datepicker').value));
    //        var EndDate = new Date(FormatUkDate($('#datepickerend').value));
    var StartDate = $('#datepicker').val();
    var EndDate = $('#datepickerend').val();

    var dateArray = new Array();
    while (StartDate <= EndDate) {
        dateArray.push(StartDate)
        StartDate = StartDate.addDays(1);
    }
    return dateArray;
}

</script>


<script>
var daterange = getDates();
var grid;
var colsArray = new Array();
var columns = [
 {
     id: "Name", name: "Name", field: "Name"
 }
  ];
for (i = 0; i < daterange.length; i++) {
    var a = daterange[i].toString()
    a = a.substring(0, 10);
    columns.push({ id: a.valueOf(), name: a.valueOf(), field: a.valueOf() });
}
var options = {
    enableCellNavigation: true,
    enableColumnReorder: true
};

$(function () {
    var myData = [];

    $.getJSON('/Home/getm', function (data) {
        myData = data;
        grid = new Slick.Grid("#myGrid", myData, columns, options);
    });
});
</script>

Answer 1

The problem was fixed by altering the button to with slickme building the grid, and more importantly calling some Ajax which passed the date picker values across fine.