Posting datepicker values to server

[Alan Mosley]

I am trying to send datepicker values back to server and bind to date objects in the controller.

this is what is being posted back
sort=&group=&filter=&FromDate=1%2F20%2F2014+12%3A00%3A00+AM&ToDate=4%2F19%2F2014+12%3A00%3A00+AM

here is my post

var chart = $("#SalesChart").data("kendoChart");

chart.dataSource.read({

   "FromDate": $("#FromDate").data("kendoDatePicker").value(),

   "ToDate": $("#ToDate").data("kendoDatePicker").value()

});

but in my controller the dates are simple #12:00.00#

Any ideas, thanks

[Alexander Popov]

Hi Alan,

Try formatting the dates as the server is expecting them, for example:  

"FromDate": kendo.toString($("#FromDate").data("kendoDatePicker").value(), "dd/MM/yyyy")

Regards,
Alexander Popov
Telerik

 

 

[Dongfen]

Hello, 
In my popup edit grid, I also have a problem with datapicker does not post back its value when it is depending on another field.

My Model:
public class TestModel
    {
        public int person_id { get; set; }

        [DisplayName("Name:")]
        public string fullName { get; set; }

        [DataType(DataType.Date)]
        [DisplayName("DOB:")]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime date_birth { get; set; }

        [DataType(DataType.Date)]
        [DisplayName("End Date:")]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
        public Nullable<System.DateTime> end_date { get; set; }

        [DataType(DataType.Date)]
        [DisplayName("Release Date:")]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
        public Nullable<System.DateTime> release_date { get; set; }

    }

My Views:
-- GetDefendantsList.cshtml
@model IEnumerable<MvcAppDemo.Models.TestModel>


@{
    ViewBag.Title = "GetDefendantsList";
}

<h2>GetDefendantsList</h2>



        @(Html.Kendo().Grid(Model)    
            .Name("grdDefendants")
            .Columns(columns =>
            {
                columns.Bound(o => o.fullName).Title("Name");
                columns.Bound(o => o.date_birth).Title("DOB");
                columns.Bound(o => o.release_date).Title("Release Date");
                columns.Bound(o => o.end_date).Title("End Date");

                columns.Command(cmd => { cmd.Edit(); });
                                
            })
            .Editable(editable => editable
                    .Mode(GridEditMode.PopUp)
                    .TemplateName("_editDefendant")
                    )
                                  
            .Pageable()
            .Sortable()
            .Selectable()
            .Events(e => e.Edit("edit"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => 
                    {
                        model.Id(m => m.person_id);
                    })
                    .Read(read => read.Action("DefendantsData_Read","Home"))
                    .Update(up => up.Action("DefendantsData_Update","Home"))
            )

        )


<script type="text/javascript">

    //debugger;

    function edit(e) {

        var label1 = e.container.find("label");
        var text1 = e.container.find("input");
    }

    function releasedate_changed() {
        var dvalue = $("#release_date").val();
        if (isDate(dvalue)) {
            var fDate = new Date(Date.parse(dvalue));
            var MM = fDate.getMonth() + 1;   // javascript month start with 0
            var DD = fDate.getDate();
            var YY = fDate.getFullYear() + 3;
            if (MM < 10) MM = "0" + MM;
            if (DD < 10) DD = "0" + DD;
            var dtEnd = MM + "/" + DD + "/" + YY;
            $("#end_date").data("kendoDatePicker").value(dtEnd);
        }
        else if (dvalue == "") {
            $("#end_date").data("kendoDatePicker").value(dvalue);
        }
    }

    function isDate(date) {
        var currVal = date;
        if (currVal === '')
            return false;

        //Declare Regex 
        var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
        var dtArray = currVal.match(rxDatePattern); // is format OK?
        if (dtArray === null)
            return false;

        //Checks for mm/dd/yyyy format.
        dtMonth = dtArray[1];
        dtDay = dtArray[3];
        dtYear = dtArray[5];
        if (dtMonth < 1 || dtMonth > 12)
            return false;
        else if (dtDay < 1 || dtDay > 31)
            return false;
        else if ((dtMonth === 4 || dtMonth === 6 || dtMonth === 9 || dtMonth === 11)
                   && dtDay === 31)
            return false;
        else if (dtMonth === 2) {
            var isleap = (dtYear % 4 === 0 && (dtYear % 100 !== 0 ||
                             dtYear % 400 === 0));
            if (dtDay > 29 || (dtDay === 29 && !isleap))
                return false;
        }
        return true;
    }

</script>


-- customer Editor Template: _editDefendant.cshtml

@model MvcAppDemo.Models.TestModel

@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "Please correct the errors and try again")


@Html.HiddenFor(model => model.person_id)

<div class="k-edit-label edit_label_left">
    @Html.LabelFor(model => model.fullName)
</div>
<div class="k-edit-field k-readonly">
    @Html.EditorFor(model => model.fullName)
</div>

<div class="k-edit-label edit_label_left">
    @Html.LabelFor(model => model.date_birth)
</div>
<div class="k-edit-field">
    @(Html.Kendo().DatePicker()
                .Name("date_birth")
                .Min(new DateTime(1900, 1, 1))
                .Max(new DateTime(2099, 12, 31))
                .Value(Model.date_birth)
                .Format("MM/dd/yyyy")
            )
    @Html.ValidationMessageFor(model => model.date_birth)
</div>

<div class="k-edit-label edit_label_left">
    @Html.LabelFor(model => model.release_date)
</div>
<div class="k-edit-field">
    @(Html.Kendo().DatePicker()
                .Name("release_date")
                .Min(new DateTime(1900, 1, 1))
                .Max(new DateTime(2099, 12, 31))
                .Value(Model.release_date)
                .Format("MM/dd/yyyy")
                .Events(
                    e => e.Change("releasedate_changed")
                )
               )
    @Html.ValidationMessageFor(model => model.release_date)
</div>

<div class="k-edit-label edit_label_left">
    @Html.LabelFor(model => model.end_date)
</div>
<div class="k-edit-field">
    @(Html.Kendo().DatePicker()
                .Name("end_date")
                .Min(new DateTime(1900, 1, 1))
                .Max(new DateTime(2099, 12, 31))
                .Value(Model.end_date)
                .Format("MM/dd/yyyy")
            )
    @Html.ValidationMessageFor(model => model.end_date)
</div>


<style scoped>
    .k-window-titlebar {
        position: absolute;
        width: 100%;
        height: 2.0em;
        line-height: 1.1em;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        margin-top: 1em;
        padding: .4em 0;
        font-size: 1.2em;
        white-space: nowrap;
        min-height: 16px;
    }
</style>




With I make change to release_date, the end_end is correctly set three years later.  But when I click "Update" button, in the controller, the end_date is still the original value.  It would catch the value I set in the releasedate_change event.

Please help.

Thanks

Dongfen

[Alexander Popov]

Hi Dongfen,

This happens because programmatically modifying the widget's value does not trigger a change in the underlying item. In the current scenario I would recommend using the Grid's edit event to attach the change event handlers and directly access the data item. For example: 

function edit(e) {
       var release =  e.container.find("[name=release_date]").data("kendoDatePicker");
       var end =  e.container.find("[name=end_date]").data("kendoDatePicker");
       release.bind("change", function () {
            var dvalue = release.value();
            if (isDate(dvalue)) {
                var fDate = new Date(Date.parse(dvalue));
                var MM = fDate.getMonth() + 1;   // javascript month start with 0
                var DD = fDate.getDate();
                var YY = fDate.getFullYear() + 3;
                if (MM < 10) MM = "0" + MM;
                if (DD < 10) DD = "0" + DD;
                var dtEnd = MM + "/" + DD + "/" + YY;
                e.model.set("end_date", dtEnd);
            }
            else if (dvalue == "") {
                e.model.set("end_date", dvalue);
            }
        });
}

Regards,
Alexander Popov
Telerik

 

 

[Dongfen]

Thanks, Alexander.

I tried your suggestion to put change event in Grid's edit event, and remove the datepicker's date change event.
But I get error on the isDate function when I make change to the release_date.
the line cause the problem is:  var dtArray = currVal.match(rxDatePattern); // is format OK?

The error message is:  0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'match'

It seems when the change event is moved inside grid's edit event, all jQuery's function does not work any more.
I tried to not use the regex, and use getMonth, getDate, and getFullYear methods, but then I will get error that said getMonth is not defined.

Any idea why this happens?

Dongfen

[Dongfen]

Actually, I take back about getMonth, getDate, getFullYear not working.
It is just the Regex not working.