We Keep Coding

How to show Open/Closed based on two shift working hours on website

I'm trying to display Open or Closed based on a shift (two Shifts daily) using Javascript. I want to be able to use that data which is stored within a span and then determine if the business is open or closed and display that. for me only one shift is working during second shift its displaying We are now closed.
Might be something better to do the same but only in HTML.
any other suggestion is appreciated.
Here is the code I have so far:
function isOpen(timeRangeEl, date) {
var day = '' + date.getDay();
var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
var days = timeRangeEl.getAttribute('data-days');
var openTime = timeRangeEl.getAttribute('data-open');
var closeTime = timeRangeEl.getAttribute('data-close');
return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;
}
function openClose() {
var date = new Date();
var display = document.getElementById('open-display');
var els = display.getElementsByClassName('timerange');
var anyActive = false;
for (var i = 0; i < els.length; i++) {
if (isOpen(els[i], date)) {
anyActive = true;
els[i].className = els[i].className.replace(/ *inactive\b/g, '');
} else if (els[i].className.indexOf('inactive') < 0) {
els[i].className += ' inactive';
}
}
if (anyActive) {
display.className = 'open';
} else {
display.className = 'closed';
}
}
setInterval(openClose, 5000);
openClose();
#open-display.open > .timerange.inactive,
#open-display.open > .timerange2.inactive,
#open-display.open .days {
display: none;
}
#open-display.open > .openclosed::before {
content: 'We are now Open';
}
#open-display.closed > .openclosed::before {
content: 'We are now Closed';
}
<div class="text">
<h3>Working Hours</h3>
<div id="open-display">
<div class="openclosed"></div>
<div class="timerange" data-days="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31" data-open="12:30" data-close="15:30"><span class="days">Noon</span> 12:30pm - 3:30pm</div>
<div class="timerange2" data-days="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31" data-open="18:00" data-close="00:30"><span class="days">Dine</span> 6:00pm - 12:30am</div>
</div>
</div>

Successfully done after trying and doing trial and error method.

Need to submit date from calender

Here is my code.
<div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('Setpermissions').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<script>
var nativePicker = document.querySelector('.nativeDateTimePicker');
var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
var daySelect = document.querySelector('#day');
var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');
// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// test whether a new datetime-local input falls back to a text input or not
var test = document.createElement('input');
try {
test.type = 'datetime-local';
} catch (e) {
console.log(e.description);
}
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
// hide the native picker and show the fallback
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
// populate the days and years dynamically
// (the months are always the same, therefore hardcoded)
populateDays(monthSelect.value);
populateYears();
populateHours();
populateMinutes();
}
function populateDays(month) {
// delete the current set of <option> elements out of the
// day <select>, ready for the next set to be injected
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
// Create variable to hold new number of days to inject
var dayNum;
// 31 or 30 days?
if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
dayNum = 30;
} else {
// If month is February, calculate whether it is a leap year or not
var year = yearSelect.value;
var isLeap = new Date(year, 1, 29).getMonth() == 1;
isLeap ? dayNum = 29 : dayNum = 28;
}
// inject the right number of new <option> elements into the day <select>
for(i = 1; i <= dayNum; i++) {
var option = document.createElement('option');
option.textContent = i;
daySelect.appendChild(option);
}
// if previous day has already been set, set daySelect's value
// to that day, to avoid the day jumping back to 1 when you
// change the year
if(previousDay) {
daySelect.value = previousDay;
// If the previous day was set to a high number, say 31, and then
// you chose a month with less total days in it (e.g. February),
// this part of the code ensures that the highest day available
// is selected, rather than showing a blank daySelect
if(daySelect.value === "") {
daySelect.value = previousDay - 1;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 2;
}
if(daySelect.value === "") {
daySelect.value = previousDay - 3;
}
}
}
function populateYears() {
// get this year as a number
var date = new Date();
var year = date.getFullYear();
// Make this year, and the 100 years before it available in the year <select>
for(var i = 0; i <= 100; i++) {
var option = document.createElement('option');
option.textContent = year-i;
yearSelect.appendChild(option);
}
}
function populateHours() {
// populate the hours <select> with the 24 hours of the day
for(var i = 0; i <= 23; i++) {
var option = document.createElement('option');
option.textContent = (i < 10) ? ("0" + i) : i;
hourSelect.appendChild(option);
}
}
function populateMinutes() {
// populate the minutes <select> with the 60 hours of each minute
for(var i = 0; i <= 59; i++) {
var option = document.createElement('option');
option.textContent = (i < 10) ? ("0" + i) : i;
minuteSelect.appendChild(option);
}
}
// when the month or year <select> values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
//preserve day selection
var previousDay;
// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function() {
previousDay = daySelect.value;
}
</script>
<form id="toDate" action="Permissions"method="post">
<div class="nativeDateTimePicker">
<label for="party">Choose a date and time for your party:</label>
<input type="datetime-local" id="party" name="toDate">
<span class="validity"></span>
</div>
</form>
Class Permissions:
public class Permissions {
private Time fromTime;
private Date fromDate;
private Time toTime;
private Date toDate;
private String reason;
private String permission;
public String getPermission() {
return permission;
}
public void setFromDate(Date fromDate) {
this.fromDate = fromDate;
}
public Date getFromDate() {
return fromDate;
}
public Date getToDate() {
return toDate;
}
public Time getFromTime() {
return fromTime;
}
public Time getToTime() {
return toTime;
}
public void setToDate(Date toDate) {
this.toDate = toDate;
}
public void setFromTime(Time from) {
this.fromTime = from;
}
public void setToTime(Time to) {
this.toTime = to;
}
public Permissions(){
reason = null;
permission = null;
fromTime=Time.valueOf("00:00:00");
toDate=Date.valueOf("2000-01-01");
toTime=Time.valueOf("00:00:00");
fromDate=Date.valueOf("2000-01-01");
}
public void setPermission(String permission) {
this.permission = permission;
}
public void setReason(String reason) {
this.reason = reason;
}
public String getReason() {
return reason;
}
}
This code displays a calender, from which a date can be selected.
I'm working on a spring mvc project, and I want to submit the date to the server. Changing form:submit is not working. So How can I do it?? Let the object be 'Permissions' (class components are given to you). Please help.

row delete but not removing the corersponding value from the total from the label using jquery

Currently working on jquery date picker with my current code where I can able to clone the row and i can able to add years and months. But when i try click add more it will create one more row and again i can able to add from date and to date it was calculating perfectly but when i click the delete button it was deleting the row but not removing the corresponding value.
here is what i tired for delete
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
Here is the fiddle link for rest of the code
Thanks in advance

The order you defined your function was wrong, the function uppdiff was not found since it was defined much later. I rearranged your code as shown below:
$(function() {
var diffDays = 0;
$.datepicker.setDefaults({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
var valid = true;
function uppdiff() {
if (valid) {
var dateStart = [];
var dateEnd = [];
$.each($('.datepicker'), function() {
if ($(this).hasClass('startDate'))
dateStart.push($(this).datepicker('getDate'))
else
dateEnd.push($(this).datepicker('getDate'))
});
diffDays = 0;
$.each(dateStart, function(key, value) {
$.each(dateStart, function(key2, value) {
if (key !== key2 && !(dateStart[key] >= dateEnd[key2] || dateEnd[key] <= dateStart[key2])) {
alert('Date ranges overlap');
valid = false;
return valid;
}
});
diffDays += parseInt((dateEnd[key] - dateStart[key]) / (1000 * 60 * 60 * 24));
return valid;
});
var year = parseInt(diffDays / 365);
var date = diffDays - (365 * year);
var month = parseInt(date / 30);
//document.getElementById("txt_expy").innerHTML = year + " year";
//document.getElementById("txt_expm").innerHTML = month + " Month";
if(year >= 0){
$("#txt_expy").text(year + " year");
}
if(month >= 0){
$("#txt_expy").text(month + " Month");
}
}
}
$(".cloned-row3").find(".datepicker").removeClass('hasDatepicker').datepicker();
var count = 0;
$(document).on("click", ".exp_add_button", function() {
var $clone = $('.cloned-row3:eq(0)').clone(true, true);
$clone.find('[id]').each(function() {
this.id += 'someotherpart'
});
$clone.find('.btn_more').after("<input type='button' value='Delete Row' class='btn_less1 selbtnless' id='buttonless'/>")
$clone.attr('id', "added" + (++count));
/*$clone.find(".degree_Description").attr('disabled', true).val('');*/
$clone.find("input.startDate,input.endDate")
.val('')
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker();
$(this).parents('.wrk_exp').after($clone);
});
$(document).on('change', ".datepicker", function() {
var valid = true;
$.each($('.datepicker'), function() {
if ($(this).val() == "") {
valid = false;
return false;
}
uppdiff();
});
uppdiff();
});
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
});
Here is the updated JSFiddle

Disabling dates and specific weekdays in jquery datepicker

I'm trying to disable specific dates (i.e christmas etc) PLUS disabling certain weekdays per default in the jQuery UI datepicker, but I can't get it to work. I have the following:
<script type="text/javascript">
iDays = 2;
blockDays = [1,4,6];
$(document).ready(function () {
$.datepicker.setDefaults($.datepicker.regional['sv']);
$('.inpDate').datepicker({
dateFormat: 'yy-mm-dd',
minDate: iDays,
maxDate: 14,
showOtherMonths: true,
showStatus: true,
beforeShowDay: noHolidays
});
var disabledDays = ["12-24-2013", "12-25-2013", "12-26-2013", "12-31-2013", "1-1-2014"]
function noHolidays(date) {
return [!disableSpecificWeekDays(date) && !nationalDays(date)];
}
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return true;
}
}
return false;
}
function disableSpecificWeekDays(date) {
var daysToDisable = blockDays;
var day = date.getDay();
for (i = 0; i < daysToDisable.length; i++) {
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
}
return [true];
}
});
</script>
If I run ONLY the disableSpecificWeekDays in the "beforeShowDay" parameter it works fine, same goes with the nationalDays. But for some reason it FEELS like it's simply ignoring the date parameter if I call it through the noHoliday function.
In short, I need help!

Just noticed your question after having answered a similar/duplicate question. Instead of copying the code from there just have a look here: Hide weekdays and specific dates of jquery datepicker

Change the day background color in FullCalendar

I'm using FullCalendar in my asp.net application. I need to change the day background color.
What i have tried so far :
dayRender: function (date, cell) {
var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
var start = new Date();
start.setDate(today.getDate()+1);
while(start <= end){
//alert(start + "\n" + tomorrow);
if(start.getDate() == date.getDate()){
cell.css("background-color", "yellow");
}
var newDate = start.setDate(start.getDate() + 1);
start = new Date(newDate);
}
}
This change background color of whole days. Demo
But my need is to change the background color of days, 7 days onward from current date.
Example
Today is 2013-July-29. I need to change the background color of below days.
2013-July-30
2013-July-31
2013-August-01
2013-August-02
2013-August-03
2013-August-04
2013-August-05
How can i do this ?

You can do it like this:
dayRender: function (date, cell) {
var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
if(date > today && date <= end) {
cell.css("background-color", "yellow");
}
}
http://jsfiddle.net/z8Jfx/7/

dayRender : function(date, cell) {
var idx = null;
var today = new Date().toDateString();
var ddate = date.toDate().toDateString();
if (ddate == today) {
idx = cell.index() + 1;
cell.css("background-color", "azure");
$(
".fc-time-grid .fc-bg table tbody tr td:nth-child("
+ idx + ")").css(
"background-color", "azure");
}
}