I've made a web application for calculating dates.
I like to have a border with rounded edges around my fieldset elements. The border radius works fine. But the border-radius is applied only to the last fieldset element.
What's the reason why it isn't applied to all fieldset elements?
var oo = {};
Object.defineProperty(oo, 'MILLI_SECONDS_DAY', {
value: 24 * 60 * 60 * 1000
});
oo.elements = [];
oo.resultDate = document.getElementById('result-date');
oo.setDays = document.getElementById('set-days');
oo.elements[0] = document.getElementById('set-day');
oo.elements[1] = document.getElementById('set-weeks');
oo.radioControls = document.querySelectorAll('.radio-control');
oo.dateSelects = document.querySelectorAll('.date-select');
oo.toggleDisable = function() {
// The main parent node of the choosen fieldset.
var fieldset = this.parentNode.parentNode;
// The all input elements within it.
var selects = fieldset.querySelectorAll('.date-select');
// Disable all input elements.
Array.prototype.forEach.call(oo.dateSelects, function(dateSelect) {
if (!dateSelect.disabled) {
dateSelect.setAttribute('disabled', 'disabled');
dateSelect.parentNode.classList.remove('active-select');
}
});
// Re-Enable all inputs in the current chosen fieldset.
Array.prototype.forEach.call(selects, function(select) {
if (select.disabled && select !== this) {
select.removeAttribute('disabled');
select.parentNode.classList.add('active-select');
}
});
}
Array.prototype.forEach.call(oo.radioControls, function(radioControl) {
radioControl.addEventListener('change', oo.toggleDisable);
});
for (var i = 0; i < oo.elements.length; i++) {
oo.elements[i].addEventListener('change', function() {
oo.resultDate.value =
oo.getDayMonthYearDate(
oo.getDateBeforeIn( oo.elements[0].value,
oo.elements[1].value ) );
});
}
oo.setDays.addEventListener('change', function() {
oo.resultDate.value =
oo.getDayMonthYearDate(
oo.getDateBeforeInDays(oo.setDays.value) );
});
oo.setOptions = function(selectElement, countOptionsStart, countOptionsEnd) {
for (var i = countOptionsStart; i <= countOptionsEnd; i++) {
var option = document.createElement('option');
var optionInner = document.createTextNode(i);
option.setAttribute('value', i);
if (i === 0) option.setAttribute('selected', 'selected');
option.appendChild(optionInner);
selectElement.appendChild(option);
}
}
oo.setOptions(oo.elements[1], -52, 52);
oo.setOptions(oo.setDays, -365, 365);
// Returns a Date Object which contains
// the date before/in n-days and
// before/in n-weeks.
// -- Parameter ----------------------------
// 1. String - The desired weekday as an
// abbreviation.
// Assign for ...
// Monday : 'mo'
// Tuesday : 'tu'
// Wednesday : 'we'
// Thursday : 'th'
// Friday : 'fr'
// Saturday : 'sa'
// Sunday : 'su'
// 2. Number - Positive number => n-weeks in
// the future.
// Negative number => n-weeks before.
// -- Return -------------------------------
// (Date) Object
oo.getDateBeforeIn = function(day, weeks) {
var currentDate = new Date();
var currentStamp = Date.now();
var weekdays = {
'mo': 1,
'tu': 2,
'we': 3,
'th': 4,
'fr': 5,
'sa': 6,
'su': 0
}
currentStamp += weeks * 7 * oo.MILLI_SECONDS_DAY;
currentStamp +=
(weekdays[day] - currentDate.getDay()) *
oo.MILLI_SECONDS_DAY;
return new Date(currentStamp);
}
oo.getDateBeforeInDays = function(days) {
var currentDate = new Date();
var currentStamp = Date.now();
currentStamp += days * oo.MILLI_SECONDS_DAY;
return new Date(currentStamp);
}
// Returns the Day, Month, Year of an
// JavaScript Date Object as as String
// in the Date format DMY.
// -- Parameter ----------------------------
// 1. Date-Object
// 2. String - Is used for separating
// Day-Year and Month-Year.
// -- Return -------------------------------
// String
oo.getDayMonthYearDate = function(dateObject, separator) {
separator = separator || '.';
return oo.getZeroPaddedNumber(dateObject.getDate(), 2) +
separator +
oo.getZeroPaddedNumber((dateObject.getMonth() + 1), 2) +
separator + dateObject.getFullYear();
}
oo.getZeroPaddedNumber = function(someNumber, desiredLength) {
someNumber = '00' + someNumber;
return someNumber.slice(desiredLength * -1);
}body {
font-family: tahoma, helvetica, sans-serif;
background-color: rgba(245, 245, 245, 1.0);
}
#wrap {
max-width: 950px;
width: 100%;
margin: 0 auto;
}
input, select, label {
margin: 10px;
}
#form-set-date {
padding: 10px 20px;
background: linear-gradient(135deg, rgba(250, 250, 250, 1.0), rgba(220, 220, 220, 1.0));
border: 1px solid rgba(100, 100, 100, 0.6);
border-radius: 12px;
}
.control-element {
margin: 10px 0;
width: 280px;
background-color: rgba(250, 250, 250, 1.0);
border: 1px solid rgba(100, 100, 100, 0.5);
border-radius: 9px;
display: inline-block;
}
.active-select:hover {
border: 1px solid rgba(0, 180, 180, 1.0);
box-shadow: 0 0 4px rgba(0, 220, 220, 1.0);
}
.control-element label {
display: inline-block;
width: 100px;
}
.read-only[disabled=disabled] {
background-color: rgba(255, 255, 255, 1.0);
color: rgba(0, 0, 0, 1.0);
text-align: center;
}
#set-day {
width: 110px;
}
input[type=radio] {
width: 30px;
}
input[type=text], select {
width: 100px;
}
fieldset:nth-of-type(n + 2) {
margin-top: 20px;
}
fieldset {
border-radius: 12px;
border: 3px solid red;
}<div id="wrap">
<form method="" action="" id="form-set-date">
<fieldset>
<legend>Specify date by weekday and week(s)</legend>
<div class="control-element active-select">
<input type="radio" id="by-days-weeks" value="daysWeeks"
class="radio-control" checked="checked"
name="radio-control" />
<label for="by-days-weeks"
class="radio-label" >Set active</label>
</div>
<div class="control-element active-select">
<label>Weekday: </label>
<select id="set-day" class="date-select">
<option value="mo">Monday</option>
<option value="tu">Tuesday</option>
<option value="we">Wednesday</option>
<option value="th">Thursday</option>
<option value="fr">Friday</option>
<option value="sa">Saturday</option>
<option value="su">Sunday</option>
</select>
</div>
<div class="control-element active-select">
<label>Week(s): </label>
<select id="set-weeks" class="date-select"></select>
</div>
</fieldset>
<fieldset>
<legend>Specify date by days</legend>
<div class="control-element active-select">
<input type="radio" id="by-days" value="days"
class="radio-control"
name="radio-control" />
<label for="by-days"
class="radio-label" >Set active</label>
</div>
<div class="control-element">
<label>Days: </label>
<select id="set-days" class="date-select"
disabled="disabled" ></select>
</div>
</fieldset>
<fieldset>
<div class="control-element">
<label>Result: </label>
<input type="text" class="read-only" id="result-date" disabled="disabled" />
</div>
</fieldset>
</form>
</div>
