date inputs and data binding

4 posts, 0 answers
  1. ryan
    ryan avatar
    2 posts
    Member since:
    Jan 2013

    Posted 19 Jan 2013 Link to this post

    I'm having a hard time getting a model property of type 'date' to bind to inputs of type 'date', 'datetime', or 'datetime-local'. I think the problem is that these inputs require value to be in a particular format or it gets ignored, but the binding isn't formatting the date properly.
    <input type=date> requires 'YYYY-DD-MM'
    <input type=datetime> requires 'YYYY-DD-MMTHH:mm:ssZ'
    <input type=datetime> requires 'YYYY-DD-MMTHH:mm:ss'

    Also I can't tell if it's properly parsing the value from the different types once a date is selected.

  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 22 Jan 2013 Link to this post

    Hello Ryan,

    Thank you for getting in touch with us.

    By default the value binding will not parse JavaScript objects into the required format. This is why I suggest you to use custom bindings. This example demonstrates how to create a date and datetime-local bindings:

    If you want to create month, time or datetime (with time zone) you have to change the format in refresh and change functions:
    refresh: function() {
        var that = this,
        value = that.bindings["dateTimeValue"].get(), //get value
        formatedValue = kendo.toString(value, "yyyy-MM-ddTHH:mm"); //format
        $(that.element).val(formatedValue); //update the HTML input element
    change: function() {
        var formatedValue = this.element.value, //get input value
        value = kendo.parseDate(formatedValue, "yyyy-MM-ddTHH:mm"); //parse the value
        if (value) {
            this.bindings["dateTimeValue"].set(value); //update the View-Model

    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Gonzalo
    Gonzalo avatar
    17 posts
    Member since:
    Mar 2014

    Posted 27 Feb 2015 in reply to Alexander Valchev Link to this post

    Thanks for the reply Alexander.
    I tried the approach suggested on the link you provided but the problem is that the "change" callback is never invoked, so my view model is never updated with the user-entered data.

    Do you know why that callback is not being invoked?
  4. Gonzalo
    Gonzalo avatar
    17 posts
    Member since:
    Mar 2014

    Posted 27 Feb 2015 in reply to Gonzalo Link to this post

    Sorry. Wrong thread.
Back to Top