jquery.dayparts v1.0.0
jquery.dayparts
A jQuery Plugin for selecting Hours-of-Day. Demo at http://mcuznz.ca/2014/05/jquery-dayparts-plugin-for-selecting-hours-of-the-day/ I'll improve on the Demo later to display extra options and catching the update event.
Consider this a Beta at best; it works for the single use case that I needed it for, but might not work in all cases. It also needs some prettying up.
Call on an empty element such as a <div>
, and it'll be populated with a Daypart selection table.
Note that this Plugin doesn't directly modify the content of a provided <input>
, as it returns an array of Objects. It does, however, trigger a catchable 'daypartsUpdate' event when changes are made, which you cna listen to, fetch the resulting data, and morph accordingly.
I'll provide better documentation soon, I swear.
Configuration
All options can have their defaults overridden (overrode?) and also can be specified per-instance.
$.fn.dayparts.defaults = {
disabled: false,
i18nfunc: function(input){ return input; },
days: {0: 'Sunday', 1: 'Monday', 2: 'Tuesday', 3: 'Wednesday', 4: 'Thursday', 5: 'Friday', 6: 'Saturday'},
weekStartsOn: 0,
use24HFormat: true,
change0Hour: true,
show2DigitsHour: false,
showPresets: true,
presets: [
{label:"Full Coverage", days:[0,1,2,3,4,5,6], hours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]},
{label:"Afternoons", days:[0,1,2,3,4,5,6], hours:[12,13,14,15,16,17]},
{label:"Evenings", days:[0,1,2,3,4,5,6], hours:[18,19,20,21,22,23]},
{label:"Mornings", days:[0,1,2,3,4,5,6], hours:[6,7,8,9,10,11]},
{label:"Weekdays", days:[1,2,3,4,5], hours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]},
{label:"Weekends", days:[0,6], hours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]},
{label:"Weekends including Friday", days:[0,5,6], hours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]}
],
labels: {
am: 'AM',
pm: 'PM',
presets: 'Presets',
presetsSubtitle: '',
choosePreset: 'Select a Preset'
},
data: []
};
Worth noting: all text - days of the week, preset names, and labels - is passed through the provided i18nfunc
before being displayed. If this isn't behaviour you need, leave the default i18nfunc
alone and just provide the values in the language of your choice. If you're creating a multilingual site, however, simply use Translation Keys in place of the Label/Day/Preset text, and pass your i18n Translator function as the i18nfunc
option.
data
is whatever selected dayparts you want to have initially selected. It takes the form of an array of objects as follows:
[{day: 0, hour: 23}, {day: 1, hour: 0}]
Values for day
are 0-6 (Sunday to Saturday) and values for hour
are 0-23.
This is an example to generate a Full Coverage
data
:
var data = [];
for (var day=0;day<7;day++){
for (var hour=0;hour<24;hour++){
data[data.length]={day: day, hour: hour};
}
}
Most other options are self-explanitory.
A note about Timezones: You're on your own here!
Listening for Changes:
You'll want to set this up something like the following:
$(selector).dayparts({data: [...]});
$(selector).on("daypartsUpdate", function() {
var parts = $(selector).dayparts.getValue();
// Your Handler here - recurse over parts and morph as necessary.
});
Known Bugs
You can drag from one block to another to "paint" a section on or off, depending on the current state of the initial block. If you drag outside of the table and release the mouse, the Dayparting widget doesn't catch the resulting mouseup
event, and sticks in paint mode. Clicking once will escape it, but you won't get the paint results you expected.
That's all she wrote!
7 years ago