Resize Calendar Based on Input Width
The following example demonstrates how to resize the nested Kendo UI Calendar based on the width of the DatePicker input element.
<div id="example">
<div id="email-settings">
<div style="margin-top: -6px; margin-left: 180px">
<input id="datepicker" value="10/10/2011" style="width:150px;" />
</div>
<div style="margin-top: 59px; margin-left: 180px">
<input id="monthpicker" value="November 2011" style="width:150px" />
</div>
</div>
<script>
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker({
open: function() {
var calendar = this.dateView.calendar;
calendar.wrapper.width(this.wrapper.width() - 6);
}
});
$("#monthpicker").kendoDatePicker({
// defines the start view
start: "year",
// defines when the calendar should return date
depth: "year",
// display month and year in the input
format: "MMMM yyyy"
});
});
</script>
<style scoped>
#example h2 {
font-weight: normal;
}
#email-settings {
height: 135px;
width: 395px;
margin: 30px auto;
padding: 110px 0 0 30px;
background: url('../content/web/datepicker/mailSettings.png') transparent no-repeat 0 0;
}
</style>
</div>
See Also
- DatePicker JavaScript API Reference
- How to Set the First Weekday
- How to Create Date Masking
- How to Globally Modify Default Options
- How to Hide the Default Button
- How to Integrate DatePicker with DateJS Library
- How to Make Input Elements Readonly
- How to Persist Entered Dates
For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.