CalendarMatrix is an EXTJS 5.x component that extends Ext.picker.Date to provide incredible flexibility in the implementation of Sencha's date picker component. This component will work with earlier version of EXTJS with slight modifications. Following examples are included in the demo and within the enclosed CalendarMatrixDemo project (Architect 3.2 project also included):
MarketWatch style Options Expiration read-only Calendar with Legend
Multi "random" date selection example
Single Date selection popup demonstrating numerous advanced features including: International Language support, customized HTML within each date cell, custom weekend styling, customized disabled dates
TripAdvisor, Trivago, Expedia and Travelocity styled date range selector examples
Added Combination example of Single Date selection plus Range selection within Forms and Grids (both row and cell editors). It demonstrates custom implementation of CalendarMatrix utilizing Ext.form.field.Date which allows manual date input with validation, but where CalendarMatrix replaces the standard datepicker.
- If both dates empty and user clicks on FromDate, then implement SINGLE selection mode (i.e. FromDate only input)
- If both dates empty and user clicks on ToDate, then implement RANGE selection mode.
After ToDate selected, ToDate is anchored and user allowed to continue selection of FromDate in a "one stroke" selection method.
- If both dates populated then accept either ToDate or FromDate based on datefield selection
- TradeDate example demonstrates disabled days after today and provided mixin methods to simplify conditional visibility of month navigation arrows.
DateFieldMixin.js is provided which demonstrates how a Mixin class can be used to simplify repetitive implementations of common functionality.
Refer to ./app/ux/CalendarMatrix/DateFieldMixin.js for additional documentation.