Skip to content

Feature/issue#91 datepicker documentation #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 11, 2018
Merged

Feature/issue#91 datepicker documentation #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
890f351
pass all Calendar inputs from DatePicker
Dec 5, 2018
b1936dc
adds the inputs for Calendar in DatePicker documentation
Dec 5, 2018
c0847f9
more examples for disable past and future dates
Dec 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions src/DatePicker/DatePicker.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
import { DatePicker } from '../';

export const DatePickerComponent = () => {
const defaultDatePickerCode = `<DatePicker />
<DatePicker compact />`;
const enableRangeSelectionDatePickerCode = `<DatePicker enableRangeSelection />
<DatePicker enableRangeSelection compact />`;
const defaultDatePickerCode = `<DatePicker disableBeforeDate={new Date(2018, 11, 24, 0, 0, 0, 0)} disableWeekends={true} />
<DatePicker
compact
disableWeekday={['Monday', 'Tuesday']}
blockedDates={[new Date(2018, 11, 1, 0, 0, 0, 0), new Date(2018, 11, 23, 0, 0, 0, 0)]}
/>`;
const enableRangeSelectionDatePickerCode = `<DatePicker enableRangeSelection disableFutureDates />
<DatePicker enableRangeSelection disablePastDates compact />`;

return (
<div>
Expand All @@ -21,23 +25,38 @@ export const DatePickerComponent = () => {

<Properties
type="Inputs"
properties={[{ name: 'enableRangeSelection', description: 'bool - Enable to select two dates' }]}
properties={[
{ name: 'enableRangeSelection', description: 'bool - Enable to select two dates' },
{name: 'disableWeekends', description: 'bool - Disable weekends'},
{name: 'disableBeforeDate', description: 'date - Disables dates of a calendar that comes before a specific date'},
{name: 'disableAfterDate', description: 'date - Disables dates of a calendar that comes after a specific date'},
{name: 'disableWeekday', description: 'array of strings - Disables dates of a calendar that match a weekday'},
{name: 'disablePastDates', description: 'bool - Disables dates that comes before today date'},
{name: 'disableFutureDates', description: 'bool - Disables dates that comes after the today date'},
{name: 'blockedDates', description: 'array of dates - Blocks dates that are between in the blocked dates'},
{name: 'disabledDates', description: 'array of dates - Disables dates that are between in the disabled dates'},
{name: 'enableRangeSelection', description: 'bool - Enable to select two dates'}
]}
/>

<Separator />

<h2>Simple Date Picker</h2>
<DocsTile centered>
<DatePicker />
<DatePicker compact />
<DatePicker disableBeforeDate={new Date(2018, 11, 24, 0, 0, 0, 0)} disableWeekends={true} />
<DatePicker
compact
disableWeekday={['Monday', 'Tuesday']}
blockedDates={[new Date(2018, 11, 1, 0, 0, 0, 0), new Date(2018, 11, 23, 0, 0, 0, 0)]}
/>
</DocsTile>
<DocsText>{defaultDatePickerCode}</DocsText>
<Separator />

<h2>Range Date Picker</h2>
<DocsTile centered>
<DatePicker enableRangeSelection />
<DatePicker enableRangeSelection compact />
<DatePicker enableRangeSelection disableFutureDates />
<DatePicker enableRangeSelection disablePastDates compact />
</DocsTile>
<DocsText>{enableRangeSelectionDatePickerCode}</DocsText>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/DatePicker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,8 @@ export class DatePicker extends Component {
};

updateDate(date) {
console.log("Inside updateDate function. The event is: ", date)

if (this.props.enableRangeSelection) {
if (date.length == 2) {
let firstDateMonth = date[0].getMonth() + 1;
Expand Down Expand Up @@ -407,6 +409,14 @@ export class DatePicker extends Component {
<Calendar
onChange={this.updateDate}
enableRangeSelection={this.props.enableRangeSelection}
disableWeekends={this.props.disableWeekends}
disableBeforeDate={this.props.disableBeforeDate}
disableAfterDate={this.props.disableAfterDate}
disableWeekday={this.props.disableWeekday}
disablePastDates={this.props.disablePastDates}
disableFutureDates={this.props.disableFutureDates}
blockedDates={this.props.blockedDates}
disabledDates={this.props.disabledDates}
customDate={
this.props.enableRangeSelection
? this.state.arrSelectedDates
Expand Down