Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Disable dates, days of week, days of month

  • Loading branch information...
commit c2b7f3797140d827f845a46a6f5ad2071cd97386 1 parent a13dc4e
@dioslaska dioslaska authored
View
21 README.md
@@ -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
================
View
4 css/mobiscroll.core.css
@@ -32,7 +32,6 @@
}
/* Datewheel wheel container wrapper */
.dwc {
- display: block;
float: left;
margin: 0 2px 5px 2px;
padding-top: 30px;
@@ -63,7 +62,6 @@
border-radius: 3px;
}
.dwwc {
- display: block;
margin: 0;
padding: 0 2px;
position: relative;
@@ -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));
View
4 demo-zepto.html
@@ -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',
View
3  demo.html
@@ -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',
View
123 js/mobiscroll.core.js
@@ -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() {
@@ -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
@@ -158,9 +181,8 @@
t.closest('.dwwl').find('.dwwb').fadeIn('fast');
}, time * 1000);
}
- else {
+ else
t.data('pos', val)
- }
}
/**
@@ -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);
}
/**
@@ -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>';
@@ -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
@@ -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;
@@ -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 = {},
@@ -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;
}
View
57 js/mobiscroll.datetime.js
@@ -23,8 +23,7 @@
stepHour: 1,
stepMinute: 1,
stepSecond: 1,
- separator: ' ',
- invalid: []
+ separator: ' '
},
preset = function(inst) {
var that = $(this),
@@ -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) {
@@ -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');
+ });
+ }
}
});
},
View
8 js/mobiscroll.select.js
@@ -1,8 +1,7 @@
(function ($) {
var defaults = {
- inputClass: '',
- invalid: []
+ inputClass: ''
}
$.scroller.presets.select = function(inst) {
@@ -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] = {};
@@ -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();
@@ -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');
});
},
Please sign in to comment.
Something went wrong with that request. Please try again.