Skip to content

Commit

Permalink
setDay when moving via shift + cursor keys
Browse files Browse the repository at this point in the history 
this enables users of this library/picker to listen to the onSelectDate
and onSetCurrendDate events and getting onSetCurrentDate when shift key
is pressed while moving via keyboard cursor keys. That way one can
implement a multi select multi month widget where the widget tracks which
dates are relevant for further handling as the user selected multiple
current dates via multiple clicks or via holding shift while moving
around over the relevant dates.
  • Loading branch information
@graste
graste committed Dec 14, 2016
1 parent d7ea184 commit 53f5495
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 18 deletions.
38 changes: 36 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ <h1>datetime-local-picker</h1>
<button class="dtp__trigger" id="emptyReqDateToggle">toggle</button>
</div>

<div class="dtp" touch-action="scroll">
<span>Multi month in-page picker (see console and use shift+cursor keys for difference)</span>
<button class="dtp__trigger" id="inpageToggle">toggle</button>
</div>

<!--
<div>
<input dir="rtl" type="datetime-local" value="2015-01-14T13:45:00.123">
Expand Down Expand Up @@ -141,7 +146,9 @@ <h1>datetime-local-picker</h1>
},
templates: {
calendars: calendars_tmpl
}
}/*,
onSetCurrentDate: onSet,
onSetSelectedDate: onSelect*/
});
window.bar = emptypicker;

Expand All @@ -156,9 +163,36 @@ <h1>datetime-local-picker</h1>
},
templates: {
calendars: calendars_tmpl
}
}/*,
onSetCurrentDate: onSet,
onSetSelectedDate: onSelect*/
});
window.baz = emptyreqpicker;

var inpagepicker = new dtlp({
toggleElement: '#inpageToggle',
//pickerElement: '…'
locale: $('html').attr('lang'),
direction: $('html').attr('dir'),
hideOnSet: false,
numberOfMonths: 2,
constraints: {
minDate: '2001-01-01',
maxDate: '2030-05-14T13:59:59.999'
},
templates: {
picker: '<div class="datepicker-inpage"><div class="datepicker__content"></div></div>',
calendars: calendars_tmpl
},
cssClasses: {
picker: 'datepicker-inpage',
pickerContent: 'datepicker__content'
},
onSetCurrentDate: onSet,
onSetSelectedDate: onSelect
});
window.inpage = inpagepicker;

});

</script>
Expand Down
37 changes: 21 additions & 16 deletions src/DatetimeLocalPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
'use strict';

var default_settings = {
inputElement: null,
outputElement: null,
toggleElement: null,
inputElement: null, // used for typing / modifying manually
outputElement: null, // output selected date to that input element
toggleElement: null, // element that toggles visibility of the picker
pickerElement: null,
utcOffsetElement: null,
//utcOffsetElement: null,

locale: 'en',
direction: 'ltr', //isRTL: false,
Expand Down Expand Up @@ -648,44 +648,47 @@
var display_mode = selected_date ? getDisplayMode(selected_date) : 'table';
if (settings.debug) { console.log('display_mode='+display_mode); }

// -> change current_date instead of just moving around when shift key is pressed
var set_day = ev.shiftKey ? true : false;

switch (ev.keyCode) {
case 37: // left
ev.preventDefault(); // prevent viewport scrolling
if (display_mode === 'table') {
if (gotoPreviousSelectableDate(selected_date, 'day')) {
if (gotoPreviousSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
}
} else if (display_mode === 'list') {
if (gotoPreviousSelectableDate(selected_date, 'day')) {
if (gotoPreviousSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
}
}
break;
case 39: // right
ev.preventDefault(); // prevent viewport scrolling
if (display_mode === 'table' && gotoNextSelectableDate(selected_date, 'day')) {
if (display_mode === 'table' && gotoNextSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
} else if (display_mode === 'list' && gotoNextSelectableDate(selected_date, 'day')) {
} else if (display_mode === 'list' && gotoNextSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
}
break;
case 38: // up
ev.preventDefault(); // prevent viewport scrolling
if (display_mode === 'table') {
if (gotoPreviousSelectableDate(selected_date, 'week')) {
if (gotoPreviousSelectableDate(selected_date, 'week', set_day)) {
updateViewOrRedraw();
}
} else if (display_mode === 'list') {
if (gotoPreviousSelectableDate(selected_date, 'day')) {
if (gotoPreviousSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
}
}
break;
case 40: // down
ev.preventDefault(); // prevent viewport scrolling
if (display_mode === 'table' && gotoNextSelectableDate(selected_date, 'week')) {
if (display_mode === 'table' && gotoNextSelectableDate(selected_date, 'week', set_day)) {
updateViewOrRedraw();
} else if (display_mode === 'list' && gotoNextSelectableDate(selected_date, 'day')) {
} else if (display_mode === 'list' && gotoNextSelectableDate(selected_date, 'day', set_day)) {
updateViewOrRedraw();
}
break;
Expand Down Expand Up @@ -852,9 +855,10 @@
return _.merge(default_event, event_data);
}

function gotoPreviousSelectableDate(prev, period) {
function gotoPreviousSelectableDate(prev, period, set_day) {
prev = parseDate(prev);
period = period || 'day';
set_day = set_day || false;

do {
// TODO decrease jump period unit if necessary?
Expand All @@ -866,15 +870,16 @@
} while (isDisabled(prev) && prev.isAfter(settings.constraints.minDate));

if (isValidDate(prev)) {
return selectDay(prev);
return set_day ? setDay(prev) : selectDay(prev);
}

return false;
}

function gotoNextSelectableDate(next, period) {
function gotoNextSelectableDate(next, period, set_day) {
next = parseDate(next);
period = period || 'day';
set_day = set_day || false;

do {
// TODO decrease jump period unit if necessary?
Expand All @@ -886,7 +891,7 @@
} while (isDisabled(next) && next.isBefore(settings.constraints.maxDate));

if (isValidDate(next)) {
return selectDay(next);
return set_day ? setDay(next) : selectDay(next);
}

return false;
Expand Down

0 comments on commit 53f5495

Please sign in to comment.