Test Dates

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
    <select data-role='dropdownlist' data-bind='value:birthdayMonth'>
        <option value='7'>July</option>        
        <option value='8'>August</option>        
        <option value='9'>Sepetember</option>
    </select>
    <select data-role='dropdownlist' data-bind='value:birthdayDay'>
        <option>8</option>        
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
    </select>
    <select data-role='dropdownlist' data-bind='value:birthdayYear'>
        <option>2008</option>        
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
    </select>
    <input type='text' data-bind='value:birthday'>
    <button data-bind='click: showDate'>Show Date</button>
</div>

JavaScript

var originalBirthday = new Date('8/9/2012');

var viewModel = new kendo.observable({
    birthday: function() {
        return this.get('birthdayMonth') + "/" + this.get('birthdayDay') + "/" + this.get('birthdayYear');
    },
    birthdayMonth: originalBirthday.getMonth()+1,
    birthdayDay: originalBirthday.getDate(),
    birthdayYear: originalBirthday.getFullYear(),
    showDate: function() {
        //alert(this.get('birthday'));
        //changed to
        alert(this.birthday());
    }
}); 


kendo.bind($('#container'), viewModel);