Hide the Default Button

The following example demonstrates how to hide the default button of the DatePicker by using CSS.

    <input id="datepicker" value="10/10/2011" style="width:150px;" />
    <script>
      $(document).ready(function() {
        $("#datepicker").kendoDatePicker();
      });
    </script>
    <style>
      .k-datepicker .k-select {
        display: none;
      }

      .k-datepicker .k-picker-wrap {
        padding: 0;
      }

      .k-datepicker .k-input {
        border-radius: 3px;
      }
    </style>

See Also

• DatePicker JavaScript API Reference
• How to Create Date Masking
• How to Globally Modify Default Options
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width
• How to Set the First Weekday

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.