Click here to Skip to main content
15,886,611 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hi guys
i have problem knockout js with date binding dosn't work

this is home controller

C#
namespace TestMVC.Controllers
{
    public class Model
    {
        public string Name { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<Model> modelList = new List<Model>(){
            new Model{Name="Ahmed",StartDate = DateTime.Parse("10/10/2010") , EndDate=DateTime.Parse("20/10/2010")},
            new Model{Name="MMMM",StartDate = DateTime.Parse("10/10/2012") , EndDate=DateTime.Parse("20/10/2013")}
            };
            Session["Model"] = modelList;
            return View();
        }

        public JsonResult LoadModel()
        {
            if (Session["Model"] != null)
            {
                List<Model> modelList = (List<Model>)Session["Model"];
               return Json(modelList, JsonRequestBehavior.AllowGet);
            }
            return Json(null, JsonRequestBehavior.AllowGet);
        }
        public void AddModel(Model model)
        {
            if (Session["Model"] != null)
            {
                List<Model> modelList = (List<Model>)Session["Model"];
                modelList.Add(model);
                Session["Model"] = modelList;
            }
        }

    }
}


this is index.html
Razor
@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script src="~/Scripts/moment.js"></script>
for add<br />
<input type="text" data-bind="value: Name" />
<input type="text" data-bind="value: StartDate" />
<input type="text" data-bind="value: EndDate" />
<input type="button" data-bind="click: addModel" value="Add" />
<br />
for edit<br />
<div data-bind="if: model">
    <input type="text" data-bind="value: model().Name" />
    <input  id="startDate" type="text" data-bind="Date: model().StartDate" />
    <input id="endDate" type="text" data-bind="Date: model().EndDate" />
    <input type="button" value="edit" data-bind="click: editModel" />
</div>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Start Date</td>
            <td>End Date</td>
            <td></td>
        </tr>
    </thead>
    <tbody data-bind="foreach: modelList">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="Date: StartDate"></td>
            <td data-bind="Date: EndDate"></td>
            <td>
                <input type="button" data-bind="click: $root.edit" value="Select" />
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    var vm = function () {
        var self = this;
        self.Name = ko.observable("");
        self.StartDate = ko.observable("");
        self.EndDate = ko.observable("");
        var model = {
            Name: self.Name,
            StartDate: self.StartDate,
            EndDate: self.EndDate
        }
        self.model = ko.observable();
        self.modelList = ko.observableArray();

        self.loadModel = function () {
            $.getJSON('/Home/LoadModel').done(function (data) {
                self.modelList(data);
            }).fail(function () {
            });
        }
        self.addModel = function () {
            $.ajax({
                url: "/Home/AddModel",
                data: ko.toJSON(model),
                type: 'POST',
                contentType: 'application/json; charset=utf-8'
            }).done(function () {
                self.loadModel();
            });
        }
        self.edit = function (model) {
            self.model(model)
        }
        self.editModel = function () {
            data = self.model;
            $.ajax({
                url: "/Home/AddModel",
                data: ko.toJSON(data),
                type: 'POST',
                contentType: 'application/json; charset=utf-8'
            }).done(function () {
                self.loadModel();
            });
        }
        self.loadModel();
       
    }
   
    ko.applyBindings(new vm);
    ko.bindingHandlers.Date = {
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            var date = moment(value);
            var strDate = date.format('DD-MM-YYYY');
            if ($(element).is(':input'))
                $(element).val(strDate);
            else
                $(element).text(strDate);
        }
    };
</script>


when i click on select then click edit start date and endDate = 01-01-0001

<img src="http://www.gulfup.com/?nul7ou" />

<img src="http://www.gulfup.com/?rvdEAR" />

how i can fix this problem
anyone help me please
i am waiting answers
Posted

1 solution

There are 2 problems here. First is with custom binding (Date). Here discussed that it is not that easy to apply 2 way binding with it. And second is that you have sent Json date string to the client and it is used everywhere (string like '/Date(111)/'), and when you send this string back to server it cant parse it correctly into DateTime property.

So for you it might be easier to implement simple value binding:

<div data-bind="if: model">
	<input type="text" data-bind="value: model().Name" />
	<input id="startDate" type="text" data-bind="value: model().StartDate" />
	<input id="endDate" type="text" data-bind="value: model().EndDate" />
	<input type="button" value="edit" data-bind="click: editModel" />
</div>


and
self.edit = function (m) {
		    var model = {
		        Name: ko.observable(m.Name),
		        StartDate: ko.observable(moment(m.StartDate).format('DD-MM-YYYY')),
		        EndDate: ko.observable(moment(m.EndDate).format('DD-MM-YYYY'))
		    };
			self.model(model);
		}
 
Share this answer
 
v2
Comments
Golden Mind 7-Oct-14 6:00am    
thank you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900