Skip to content

Commit

Permalink
Disable dates, days of week, days of month
Browse files Browse the repository at this point in the history
  • Loading branch information
@dioslaska
dioslaska committed May 10, 2012
1 parent a13dc4e commit c2b7f37
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 90 deletions.
21 changes: 21 additions & 0 deletions README.md
View file
Expand Up @@ -23,6 +23,27 @@ It'd be cool to see how you're using Mobiscroll!

We're looking at showcasing some of the best work on http://mobiscroll.com . Feel free to let us know on twitter @mobiscroll!

Changelog 2.0rc3
================

Bugfixes
--------

* Fixed: In clickpick mode minus button had plus button behavior

* Fixed: In inline mode getValue always returned the initial values

* Fixed: min/max attributes were incorrectly parsed when using HTML5 time input

Enhancements
------------

* Added: _invalid_ option for the datetime preset to set dates unselectable. There are three properties to specify dates, all can be used separate or combined. _dates_ is be an array of dates to disable exact dates on the scroller. _daysOfWeek_ is an array with values from 0 to 6, _daysOfMonth_ is an array which accepts numbers (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December is disabled). A sample configuration: invalid: { dates: [new Date(2012,5,4), new Date(2012,5,13)], daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }

* Added: The select preset automatically disables elements on the scroller if they were disabled in the original html select element



Changelog 2.0rc2
================

Expand Down
4 changes: 0 additions & 4 deletions css/mobiscroll.core.css
View file
Expand Up @@ -32,7 +32,6 @@
}
/* Datewheel wheel container wrapper */
.dwc {
display: block;
float: left;
margin: 0 2px 5px 2px;
padding-top: 30px;
Expand Down Expand Up @@ -63,7 +62,6 @@
border-radius: 3px;
}
.dwwc {
display: block;
margin: 0;
padding: 0 2px;
position: relative;
Expand All @@ -73,8 +71,6 @@
/* Datewheel wheels */
.dwwl {
margin: 4px 2px;
float: left;
display: block;
position: relative;
background: #888;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),color-stop(1, #000));
Expand Down
4 changes: 3 additions & 1 deletion demo-zepto.html
View file
Expand Up @@ -85,7 +85,9 @@
var curr = new Date().getFullYear();
var opt = {
'date': {
preset: 'date'
preset: 'date',
dateOrder: 'mmddyy',
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }
},
'datetime': {
preset: 'datetime',
Expand Down
3 changes: 2 additions & 1 deletion demo.html
View file
Expand Up @@ -49,7 +49,8 @@
var curr = new Date().getFullYear();
var opt = {
'date': {
preset: 'date'
preset: 'date',
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] }
},
'datetime': {
preset: 'datetime',
Expand Down
123 changes: 62 additions & 61 deletions js/mobiscroll.core.js
View file
Expand Up @@ -46,17 +46,51 @@
that.setValue(true);
}

function scrollToPos(time) {
function scrollToPos(time, orig, index, manual, dir) {
// Initial validate
s.validate.call(e, dw, index);

// Set scrollers to position
$('.dww ul', dw).each(function(i) {
var cell = $('li[data-val="' + that.temp[i] + '"]', this),
x = cell.index();
// Initial validate
x = that.validate(i, x, cell);
that.scroll($(this), x < 0 ? 0 : x, time);
var t = $(this),
cell = $('li[data-val="' + that.temp[i] + '"]', t),
x = cell.index(),
v = scrollToValid(cell, x, i, dir);
if (x != v || i == index || index === undefined)
that.scroll($(this), v, (i == index ? time : 0), orig, i);
});
// Refromat value if validation changed something
that.change();

// Reformat value if validation changed something
that.change(manual);
}

function scrollToValid(cell, val, i, dir) {
// Process invalid cells
if (!cell.hasClass('dw-v')) {
var cell1 = cell,
cell2 = cell,
dist1 = 0,
dist2 = 0;
while (cell1.prev().length && !cell1.hasClass('dw-v')) {
cell1 = cell1.prev();
dist1++;
}
while (cell2.next().length && !cell2.hasClass('dw-v')) {
cell2 = cell2.next();
dist2++;
}
// If we have direction (+/- or mouse wheel), the distance does not count
if ((dist2 < dist1 && dist2 && !dir == 1) || !dist1 || !cell1.hasClass('dw-v') || dir == 1) {
cell = cell2;
val = val + dist2;
}
else {
cell = cell1;
val = val - dist1;
}
that.temp[i] = cell.data('val');
}
return val;
}

function position() {
Expand Down Expand Up @@ -84,26 +118,15 @@
}

function plus(t) {
if (timer) {
var p = +t.data('pos'),
val = p + 1;
calc(t, val > max ? min : val);
}
else {
clearInterval(timer);
}
var p = +t.data('pos'),
val = p + 1;
calc(t, val > max ? min : val, 1);
}

function minus(t) {
if (timer) {
var p = +t.data('pos'),
val = p - 1;

calc(t, val < min ? max : val);
}
else {
clearInterval(timer);
}
var p = +t.data('pos'),
val = p - 1;
calc(t, val < min ? max : val, 2);
}

// Public functions
Expand Down Expand Up @@ -158,9 +181,8 @@
t.closest('.dwwl').find('.dwwb').fadeIn('fast');
}, time * 1000);
}
else {
else
t.data('pos', val)
}
}

/**
Expand All @@ -181,30 +203,8 @@
* In case of date presets it checks the number of days in a month.
* @param {Integer} i - Currently changed wheel index, -1 if initial validation.
*/
that.validate = function (i, val, cell) {
// If target is month, show/hide days
s.validate.call(e, dw, i)

// Process invalid cells
if (!cell.hasClass('dw-v')) {
var cell1 = cell,
cell2 = cell,
dist1 = 0,
dist2 = 0;
while (cell1.prev().length && !cell1.hasClass('dw-v')) {
cell1 = cell1.prev();
dist1++;
}
while (cell2.next().length && !cell2.hasClass('dw-v')) {
cell2 = cell2.next();
dist2++;
}
cell = dist2 < dist1 ? cell2 : cell1;
val = dist2 < dist1 ? val + dist2 : val - dist1;
that.temp[i] = cell.data('val');
}

return val;
that.validate = function(time, orig, i, dir) {
scrollToPos(time, orig, i, true, dir);
}

/**
Expand Down Expand Up @@ -252,17 +252,17 @@
// Create wheels containers
var html = '<div class="' + s.theme + '">' + (s.display == 'inline' ? '<div class="dw dwbg dwi"><div class="dwwr">' : '<div class="dwo"></div><div class="dw dwbg"><div class="dwwr">' + (s.headerText ? '<div class="dwv"></div>' : ''));
for (var i = 0; i < s.wheels.length; i++) {
html += '<div class="dwc' + (s.mode != 'scroller' ? ' dwpm' : ' dwsc') + (s.showLabel ? '' : ' dwhl') + '"><div class="dwwc dwrc">';
html += '<div class="dwc' + (s.mode != 'scroller' ? ' dwpm' : ' dwsc') + (s.showLabel ? '' : ' dwhl') + '"><div class="dwwc dwrc"><table cellpadding="0" cellspacing="0"><tr>';
// Create wheels
for (var label in s.wheels[i]) {
html += '<div class="dwwl dwrc" style="height:' + thi + 'px;">' + (s.mode != 'scroller' ? '<div class="dwwb dwwbp" style="height:' + hi + 'px;line-height:' + hi + 'px;"><span>+</span></div><div class="dwwb dwwbm" style="height:' + hi + 'px;line-height:' + hi + 'px;"><span>&ndash;</span></div>' : '') + '<div class="dwl">' + label + '</div><div class="dww dwrc" style="height:' + thi + 'px;min-width:' + s.width + 'px;"><ul>';
html += '<td><div class="dwwl dwrc">' + (s.mode != 'scroller' ? '<div class="dwwb dwwbp" style="height:' + hi + 'px;line-height:' + hi + 'px;"><span>+</span></div><div class="dwwb dwwbm" style="height:' + hi + 'px;line-height:' + hi + 'px;"><span>&ndash;</span></div>' : '') + '<div class="dwl">' + label + '</div><div class="dww dwrc" style="height:' + thi + 'px;min-width:' + s.width + 'px;"><ul>';
// Create wheel values
for (var j in s.wheels[i][label]) {
html += '<li class="dw-v" data-val="' + j + '" style="height:' + hi + 'px;line-height:' + hi + 'px;">' + s.wheels[i][label][j] + '</li>';
}
html += '</ul><div class="dwwo"></div></div><div class="dwwol"></div></div>';
html += '</ul><div class="dwwo"></div></div><div class="dwwol"></div></div></td>';
}
html += '<div class="dwcc"></div></div></div>';
html += '</tr></table></div></div>';
}
html += (s.display != 'inline' ? '<div class="dwbc"><span class="dwbw dwb-s"><a href="#" class="dwb">' + s.setText + '</a></span><span class="dwbw dwb-c"><a href="#" class="dwb">' + s.cancelText + '</a></span></div>' : '<div class="dwcc"></div>') + '</div></div></div>';

Expand Down Expand Up @@ -314,7 +314,7 @@
p = +t.data('pos'),
val = Math.round(p - delta);
setGlobals(t);
calc(t, val);
calc(t, val, delta < 0 ? 1 : 2);
}
}).delegate('.dwb, .dwwb', START_EVENT, function (e) {
// Active button
Expand Down Expand Up @@ -433,7 +433,7 @@
return (v === true || v == 'true');
}

function calc(t, val, anim, orig) {
function calc(t, val, dir, anim, orig) {
var i = t.closest('.dwwr').find('ul').index(t);

val = val > max ? max : val;
Expand All @@ -444,13 +444,14 @@
inst.temp[i] = cell.data('val');

// Validate
val = inst.validate(i, val, cell);
//val = inst.validate(i, val, cell);

// Call scroll with animation (calc animation time)
inst.scroll(t, val, anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i);
//inst.scroll(t, val, anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i);
inst.validate(anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i, dir);

// Set value text
inst.change(true);
//inst.change(true);
}

var scrollers = {},
Expand Down Expand Up @@ -642,7 +643,7 @@
else {
var dist = stop - start;
}
calc(target, Math.round(pos - dist / h), true, Math.round(val));
calc(target, Math.round(pos - dist / h), 0, true, Math.round(val));
move = false;
target = null;
}
Expand Down
57 changes: 38 additions & 19 deletions js/mobiscroll.datetime.js
View file
Expand Up @@ -23,8 +23,7 @@
stepHour: 1,
stepMinute: 1,
stepSecond: 1,
separator: ' ',
invalid: []
separator: ' '
},
preset = function(inst) {
var that = $(this),
Expand Down Expand Up @@ -224,7 +223,7 @@
var temp = inst.temp,
mins = { m: 0, d: 1, h: 0, i: 0, s: 0, ap: 0 },
maxs = { m: 11, d: 31, h: step(hampm ? 11 : 23, stepH), i: step(59, stepM), s: step(59, stepS), ap: 1 },
w = (mind || maxd) ? ['y', 'm', 'd', 'ap', 'h', 'i', 's'] : ((i == o.y || i == o.m) ? ['d'] : []), // Validate day only, if no min/max date set
w = (mind || maxd) ? ['y', 'm', 'd', 'ap', 'h', 'i', 's'] : ((i == o.y || i == o.m || i === undefined) ? ['d'] : []), // Validate day only, if no min/max date set
minprop = true,
maxprop = true;
$.each(w, function(x, i) {
Expand Down Expand Up @@ -261,29 +260,49 @@
if (i == 'd') { // Hide days not in month
$('li', t).removeClass('dw-h').slice(maxdays).addClass('dw-h');
}
if (val < min) {
inst.scroll(t, i1);
temp[o[i]] = $('li', t).eq(i1).data('val');
if (val < min)
val = min;
}
if (val > max) {
inst.scroll(t, i2);
temp[o[i]] = $('li', t).eq(i2).data('val');
if (val > max)
val = max;
}
}
if (i == 'd') {
// Disable dates
$.each(s.invalid, function(i, v) {
if (v.getFullYear() == y && v.getMonth() == m) {
$('li[data-val="' + v.getDate() + '"]', t).removeClass('dw-v');
}
});
}
if (minprop)
minprop = val == min;
if (maxprop)
maxprop = val == max;
// Disable some days
if (s.invalid && i == 'd') {
var idx = [];
// Disable exact dates
if (s.invalid.dates)
$.each(s.invalid.dates, function(i, v) {
if (v.getFullYear() == y && v.getMonth() == m) {
idx.push(v.getDate() - 1);
}
});
// Disable days of week
if (s.invalid.daysOfWeek) {
var first = new Date(y, m, 1).getDay();
$.each(s.invalid.daysOfWeek, function(i, v) {
for (var j = v - first; j < maxdays; j += 7)
if (j >= 0)
idx.push(j);
});
}
// Disable days of month
if (s.invalid.daysOfMonth)
$.each(s.invalid.daysOfMonth, function(i, v) {
v = (v + '').split('/');
if (v[1]) {
if (v[0] - 1 == m)
idx.push(v[1] - 1);
}
else
idx.push(v[0] - 1);
});
$.each(idx, function(i, v) {
$('li', t).eq(v).removeClass('dw-v');
});
}
}
});
},
Expand Down
8 changes: 4 additions & 4 deletions js/mobiscroll.select.js
View file
@@ -1,8 +1,7 @@
(function ($) {

var defaults = {
inputClass: '',
invalid: []
inputClass: ''
}

$.scroller.presets.select = function(inst) {
Expand All @@ -12,6 +11,7 @@
l1 = $('label[for="' + this.id + '"]').attr('for', id),
l2 = $('label[for="' + id + '"]'),
label = l2.length ? l2.text() : elm.attr('name'),
invalid = [],
w = [{}];

w[0][label] = {};
Expand All @@ -21,7 +21,7 @@
$('option', elm).each(function() {
var v = $(this).attr('value');
main[v] = $(this).text();
if ($(this).prop('disabled')) s.invalid.push(v);
if ($(this).prop('disabled')) invalid.push(v);
});

$('#' + id).remove();
Expand All @@ -44,7 +44,7 @@
return [elm.val()];
},
validate: function(dw) {
$.each(s.invalid, function(i, v) {
$.each(invalid, function(i, v) {
$('li[data-val="' + v + '"]', dw).removeClass('dw-v');
});
},
Expand Down

0 comments on commit c2b7f37

Please sign in to comment.