Skip to content

Commit

Permalink
fix(datepicker): provide styles when adjacent month is selected withi…
Browse files Browse the repository at this point in the history 
…n a week range
  • Loading branch information
@brandonferrua
brandonferrua committed Aug 7, 2017
1 parent 7d8a09d commit bab8e26
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 41 deletions.
8 changes: 5 additions & 3 deletions ui/components/datepickers/base/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
cursor: pointer;
}

&:focus:not(.slds-disabled-text) {
&:focus {
outline: 0;

> .slds-day {
Expand All @@ -72,13 +72,15 @@
* @selector .slds-is-selected
* @restrict .slds-datepicker td
*/
&.slds-is-selected:not(.slds-disabled-text):not(.slds-is-today) > .slds-day {
&.slds-is-selected:not(.slds-is-today) > .slds-day {
background: $color-background-button-brand-hover;
color: $color-text-button-brand-hover;
}

&.slds-is-selected:not(.slds-disabled-text):focus > .slds-day {
&.slds-is-selected:focus > .slds-day {
background: $color-background-row-hover;
box-shadow: $color-border-brand-dark 0 0 3px;
color: currentColor;
}
}

Expand Down
85 changes: 62 additions & 23 deletions ui/components/datepickers/base/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,66 +135,105 @@ export let DatePicker = props =>
</Week>
<Week className={classNames(
{
'slds-has-multi-selection': props.dateRange == 'week',
'slds-has-multi-row-selection': props.dateRange == 'weeks'
'slds-has-multi-selection': props.dateRange == 'week-4',
'slds-has-multi-row-selection': props.dateRangeMulti
}
)}>
<Day aria-selected="false">21</Day>
<Day aria-selected="false">22</Day>
<Day aria-selected="false">23</Day>
<Day
aria-selected={props.dateSelected ? 'true' : 'false'}
aria-selected={props.dateSelected && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={classNames(
{
'slds-is-selected': props.dateSelected,
'slds-is-selected-multi': props.dateSelected && props.dateRange
'slds-is-selected': props.dateSelected === 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5')
}
)}
>
24
</Day>
<Day
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={classNames(
{
'slds-is-selected slds-is-selected-multi': props.dateSelected && props.dateRange,
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
'slds-is-today': props.todayActiveInRange
}
)}
>
25
</Day>
<Day
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
>
26
</Day>
<Day
aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
>
27
</Day>
</Week>
<Week className={props.dateRange == 'weeks' ? 'slds-has-multi-row-selection' : null}>
<Week className={classNames(
{
'slds-has-multi-selection': props.dateRange == 'week-5',
'slds-has-multi-row-selection': props.dateRangeMulti
}
)}>
<Day
aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
aria-selected={props.dateSelected && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={classNames(
{
'slds-is-selected': props.dateSelected === 'single' && props.dateRange === 'week-5',
'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5')
}
)}
>
28
</Day>
<Day
aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
>
29
</Day>
<Day aria-selected="false">30</Day>
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">1</Day>
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">2</Day>
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">3</Day>
<Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">4</Day>
<Day
aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
>
30
</Day>
<Day
aria-disabled="true"
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
>
1
</Day>
<Day
aria-disabled="true"
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
>
2
</Day>
<Day
aria-disabled="true"
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
>
3
</Day>
<Day
aria-disabled="true"
aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
>
4
</Day>
</Week>
</tbody>
</table>
Expand Down Expand Up @@ -237,9 +276,9 @@ export let states = [
label="Date"
inputId={dateInputId}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected />}
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
>
<Input id={dateInputId} placeholder=" " value="06/23/2014" />
<Input id={dateInputId} placeholder=" " value="06/24/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon_right"
symbol="event"
Expand Down
74 changes: 59 additions & 15 deletions ui/components/datepickers/range/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@ export let states = [
label="Start Date"
inputId={dateRangeInputId01}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected />}
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
>
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand All @@ -99,7 +99,7 @@ export let states = [
label="End Date"
inputId={dateRangeInputId02}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected />}
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
>
<Input id={dateRangeInputId02} placeholder=" " />
<ButtonIcon
Expand Down Expand Up @@ -128,9 +128,9 @@ export let states = [
label="Start Date"
inputId={dateRangeInputId01}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected />}
dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
>
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand All @@ -143,7 +143,7 @@ export let states = [
label="End Date"
inputId={dateRangeInputId02}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected dateRange="week" />}
dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
>
<Input id={dateRangeInputId02} placeholder=" " value="06/27/2014" />
<ButtonIcon
Expand All @@ -168,13 +168,13 @@ export let states = [
<div className="slds-form-element__group">
<div className="slds-form-element__row">
<FormElement
className="slds-dropdown-trigger slds-dropdown-trigger--click"
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
label="Start Date"
inputId={dateRangeInputId01}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected />}
dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" dateRangeMulti />}
>
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand All @@ -187,9 +187,9 @@ export let states = [
label="End Date"
inputId={dateRangeInputId02}
inputIcon="right"
dropdown={<DatePicker todayActive dateSelected dateRange="weeks" />}
dropdown={<DatePicker todayActive dateSelected dateRange="week-4-5" dateRangeMulti />}
>
<Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
<Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand All @@ -216,9 +216,53 @@ export let states = [
label="Start Date"
inputId={dateRangeInputId01}
inputIcon="right"
dropdown={<DatePicker todayActiveInRange dateSelected />}
dropdown={<DatePicker todayActiveInRange dateSelected="single" dateRange="week-4" dateRangeMulti />}
>
<Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
assistiveText="Select a date"
title="Select a date"
/>
</FormElement>
<FormElement
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
label="End Date"
inputId={dateRangeInputId02}
inputIcon="right"
dropdown={<DatePicker todayActiveInRange dateSelected dateRange="week-4-5" dateRangeMulti />}
>
<Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
assistiveText="Select a date"
title="Select a date"
/>
</FormElement>
</div>
</div>
</fieldset>
</div>
},
{
id: 'span-across-month-in-range',
label: 'Current and adjacent month in selected range',
element:
<div className="slds-form slds-form--compound">
<fieldset className="slds-form-element">
<legend className="slds-form-element__label">Start and End Date</legend>
<div className="slds-form-element__group">
<div className="slds-form-element__row">
<FormElement
className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
label="Start Date"
inputId={dateRangeInputId01}
inputIcon="right"
dropdown={<DatePicker dateSelected="single" dateRange="week-5" />}
>
<Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
<Input id={dateRangeInputId01} placeholder=" " value="06/28/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand All @@ -231,9 +275,9 @@ export let states = [
label="End Date"
inputId={dateRangeInputId02}
inputIcon="right"
dropdown={<DatePicker todayActiveInRange dateSelected dateRange="weeks" />}
dropdown={<DatePicker dateSelected dateRange="week-5" />}
>
<Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
<Input id={dateRangeInputId02} placeholder=" " value="07/04/2014" />
<ButtonIcon
className="slds-input__icon slds-input__icon--right"
symbol="event"
Expand Down

1 comment on commit bab8e26

@akshay0606
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @brandonferrua ,
I tried to use the date picker code from (https://www.lightningdesignsystem.com/components/datepickers/#content), however it doesnt work, do i need to modify something in the date picker code or i need to use a custom date picker from jquery in a visualforce page with lightning css Thanks in Advance!

Please sign in to comment.