Alexey Safronov
f3afd79a3f
# Conflicts: # packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js # packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js # packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js # packages/asc-web-common/components/PageLayout/index.js # packages/asc-web-common/store/SettingsStore.js # packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js # packages/asc-web-components/combobox/index.js # packages/asc-web-components/context-menu/styled-context-menu.js # packages/asc-web-components/drop-down/index.js # packages/asc-web-components/link-with-dropdown/index.js # packages/asc-web-components/row/index.js # packages/asc-web-components/table-container/StyledTableContainer.js # packages/asc-web-components/table-container/TableHeaderCell.js # packages/asc-web-components/themes/dark.js # products/ASC.Files/Client/public/images/files.menu.svg # products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js # products/ASC.Files/Client/src/components/Badges.js # products/ASC.Files/Client/src/components/QuickButtons.js # products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js # products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js # products/ASC.Files/Client/src/components/panels/SharingPanel/index.js # products/ASC.Files/Client/src/components/panels/StyledPanels.js # products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js # products/ASC.Files/Client/src/components/panels/UploadPanel/index.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js # products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js # products/ASC.Files/Client/src/pages/Home/Section/Header/index.js # products/ASC.Files/Client/src/pages/Home/index.js # products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js # products/ASC.Files/Client/src/store/UploadDataStore.js # products/ASC.People/Client/public/images/people.menu.svg # products/ASC.People/Client/src/components/GroupSelector/index.js # products/ASC.People/Client/src/components/PeopleSelector/index.js # products/ASC.People/Client/src/pages/Home/Section/Body/RowView/userContent.js # products/ASC.People/Client/src/pages/Home/index.js # products/ASC.People/Client/src/pages/Profile/Section/Body/index.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/nav-item.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js # web/ASC.Web.Client/src/components/pages/Home/index.js |
||
---|---|---|
.. | ||
date-picker.stories.js | ||
date-picker.test.js | ||
index.js | ||
README.md | ||
styled-date-picker.js |
DatePicker
Base DatePicker component
Usage
import DatePicker from "@appserver/components/date-picker";
<DatePicker
onChange={(date) => {
console.log("Selected date", date);
}}
selectedDate={new Date()}
minDate={new Date("1970/01/01")}
maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
isDisabled={false}
isReadOnly={false}
hasError={false}
isOpen={false}
themeColor="#ED7309"
locale="en"
/>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
calendarHeaderContent |
string |
- | - | - | Calendar header content (calendar opened in aside) |
calendarSize |
oneOf |
- | base , big |
- | Calendar size |
className |
string |
- | - | - | Accepts class |
displayType |
oneOf |
- | dropdown , aside , auto |
auto |
Calendar display type |
hasError |
bool |
- | - | Set error date-input style | |
id |
string |
- | - | - | Accepts id |
isDisabled |
bool |
- | - | - | Disabled react-calendar |
isOpen |
bool |
- | - | Opens calendar | |
isReadOnly |
bool |
- | - | Set input type is read only | |
locale |
string |
- | - | User's browser settings |
Browser locale |
maxDate |
date |
- | - | new Date("3000/01/01") |
Maximum date that the user can select. |
minDate |
date |
- | - | new Date("1970/01/01") |
Minimum date that the user can select. |
onChange |
func |
- | - | - | Function called when the user select a day |
openToDate |
date |
- | - | (today) |
Opened date value |
scaled |
bool |
- | - | Selected calendar size | |
selectedDate |
date |
- | - | (today) |
Selected date value |
style |
obj , array |
- | - | - | Accepts css style |
themeColor |
string |
- | - | #ED7309 |
Color of the selected day |
zIndex |
number |
- | - | 310 |
Calendar css z-index |