CODEWITHSUNDEEP
kendo-uidatetimepicker
Rui Martins
Rui Martins

Reputation: 2184

Set the format of a Kendo DateTimePicker date sent to the controller

I'm using a Kendo DateTimePicker in my application.

The value I get from it in my application is 

Wed Aug 13 2014 00:00:00 GMT+0200 (Romance Daylight Time)

I can't parse this to a DateTime. I get a "String was not recognized as a valid DateTime." error.

How can I set the format of the date I get from the DateTimePicker?? Is there an option in Kendo DateTimePicker??t

Upvotes: 8

Views: 42186

Answers (6)

user1585204
user1585204

Reputation: 965

Here is a different answer, using Se SendKeys() method.

Observing how typing a date manually worked, this solution was arrived at:

Using Web Driver and Send Keys method to enter a date

Working on how to get the date picker icon accessed. It's tricky but when it's figured out, will post it here and in this other link:

Another SO Post for Date Formatting with Se

Just tinker with other date formats. Note, lower case m, mm, etc. is minutes for the Kendo date picker. Has to be caps MM, MMM for month.

After the 2 digit date is entered, the picker skips to the month section. Characters can be sent for the month or 1-12 for Jan - Dec can be used. MMM auto converts 1-12 to the 3 character month value.

Just set up an Se test to figure out anything else.

'I'll be back...' with the date picker icon solution.

Upvotes: 0

user2700938
user2700938

Reputation: 11

If you are binding the grid using the kendo API, you can use .Format("0:d"). Here is the link where you can find meaning of standard and custom formats- Date formatting

Here is one example using custom formatting columns.Bound(model => model.CreatedOn).Format("{0:dd.MM.yyyy - HH:mm:ss}");

It result in this in 24 hour format: 20.07.2016 - 11:01:23.

Upvotes: 0

Abhishek Sharma
Abhishek Sharma

Reputation: 45

I created a custom binder which I use in place of the "VALUE" data-bind property

kendo.data.binders.widget.shortdate = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
    kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
    var that = this;
    $(widget.element).on("change", function () {
        that.change();
    });
},
refresh: function () {
    var path = this.bindings.shortdate.path,
        source = this.bindings.shortdate.source,
        value = source.get(path);
    this.bindings["shortdate"].set(value);
},
change: function () {
    var formatedValue = this.element.value,
    value = kendo.toString(new Date(formatedValue), "d");
    if (value) {
        this.bindings["shortdate"].set(value);
    }
}

});

Upvotes: 1

cwishva
cwishva

Reputation: 1978

If you Need to Change the Date that you get from your application you can do as below 

var dateobj=kendo.parseDate("Wed Aug 13 2014 00:00:00 GMT+0200 (Romance Daylight Time)", "yyyy-MM-dd h:mm:ss tt");
var datestring = kendo.toString(dateobj, "MM-dd-yyyy h:mm:ss tt");

kendo.parseDate() will Parse the Date to a Date Object and kendo.toString() will format the date to a string

If you need to convert the date you get from the Datepicker Do this 

var datepicker = $("#datepicker").data("kendoDatePicker");
var value = datepicker.value();
kendo.toString(value,"dd/MM/YYYY")

IF you need to convert Datepicker date to the Sever Date 

var datepicker = $("#datepicker").data("kendoDatePicker");
    var value = datepicker.value();
    value.toUTCString();

Upvotes: 17

Stefano Magistri
Stefano Magistri

Reputation: 1150

Here what I have used:

 var dateobj = kendo.parseDate("Wed Aug 13 2014 00:00:00 GMT+0200 (Romance Daylight Time)");
 var datestring = kendo.toString(dateobj, "MM-dd-yyyy h:mm:ss tt");

Upvotes: 1

Mohammad Atiour Islam
Mohammad Atiour Islam

Reputation: 5708

you can also try this

entity.ExpiredDate = ParseDate(model.ExpiredDate);



private static DateTime ParseDate(string input)
        {
            return DateTime.ParseExact(input, formats, CultureInfo.InvariantCulture, DateTimeStyles.None);
        }

  private static string[] formats = new string[]
    {
        "MM/dd/yyyy HH:mm:ss tt",
        "MM/dd/yyyy HH:mm:ss",
        "M/dd/yyyy H:mm:ss tt",
        "M/dd/yyyy H:mm:ss"   ,
        "MM/dd/yyyy hh:mm tt"
    };

You can also see this

Upvotes: 0

Related Questions