Posting datepicker values to server

6 posts, 0 answers
  1. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 19 Apr 2014 Link to this post

    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







  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 25 Aug 2014 Link to this post

    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





  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 27 Aug 2014 in reply to Alexander Popov Link to this post

    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





  7. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 27 Aug 2014 in reply to Dongfen Link to this post

    Actually, I take back about getMonth, getDate, getFullYear not working.
    It is just the Regex not working. 
Back to Top
UI for ASP.NET MVC is VS 2017 Ready