title: Mask for kendo datepicker
body: <p>I want to add mask to <code>DatePicker</code>. I found in the Internet the following code:</p>
  
  <pre><code>(function($) {
      varui = kendo.ui,
       MyMask = kendo.ui.DatePicker.extend({
          init: function(element, options) {           
              varextended = $.extend(this.options, options);
              kendo.ui.DatePicker.prototype.init.call(this, element, extended);
              debugger;
              $(element).inputmask("mask",extended);
          },
          options: {          
              name: "MyMaskedDatePicker",
              mask: "99/99/9999",
              showMaskOnHover: false,
              clearMaskOnLostFocus: true
          }
      });
  
      ui.plugin(MyMask);
  
  })(jQuery);
  </code></pre>
  
  <p>The html code:</p>
  
  <pre><code>&lt;inputdata-role="mymaskeddatepicker"data-bind="value: DateOfBirth"data-placeholder="DD/MM/YYYY"/&gt;
  </code></pre>
  
  <p>But, this code use the other data-role attribute, but I use the ASP.NET MVC Html Helpers and by default <code>data-role</code> is <code>datepicker</code>. What is best way to solve it?
  Thanks.</p>
  
  <p>PS.<a href="http://jsfiddle.net/7JA74/10/" rel="nofollow">JSFidle</a></p>