Date Picker Demos

Default Date Picker

Simple date picker with default style and default settings. If you click on a date, the selected date will appear below the calendar.

Custom Style #1

Date picker with custom blue style

Custom Style #2

Date picker with custom gray style and selectionMode set to 'week'

Max Width

By default, the date picker uses the cell width style to set the overall width of component. So, for example, if the cell width is set to 18px, the overall width will be approximately 18x7 pixels wide (excluding border, margin, etc). To use the entire available width, you can update the style of the 'panel', 'cell', and 'today' as follows:

    style: {
        panel: {
            width: "100%",
            ...
        },
        cell: {
            width: "",
            ...
        },
        today: {
            width: "100%",
            ...
        },
        ...
    }