Develop Reference

Passing data to another function without repeating code

I have form with input fields for some service, now I have trouble how to pass data from to function.
This form accept number and this number is multiplied to get total price, but some inputs can be 0.
I declare in globals to get value from the inputs
var cleaning_size;
var bathroom_number;
$( ".needs-validation" ).on( "change", "input", function() {
cleaning_size = $("#cleaning-size").val();
bathroom_number = $("#bathroom-numbers").val();
})
And in the form i have datepicker where you chose date, but if selected sunday the price calculation is different
$("#datepicker").datepicker({
changeMonth: true,
onSelect: function (selectedDate) {
var date = $(this).datepicker('getDate');
var day = date.getUTCDay();
if (day == '6') {
price_cleaning_size = 1.5;
price_bathroom_number = 26;
} else {
price_cleaning_size = 1.2;
price_bathroom_number = 24;
}
}
});
And then i calculate total in different function:
function calculate_total_value(){
var cleaning_size_price = cleaning_size * price_cleaning_size;
var bathromm_number_price = bathroom_number * price_bathroom_number;
var total_price = cleaning_size_price + bathromm_number_price;
$('#total-price strong').text(total_price).val();
}
Now i have issue how to get data from the datepicker if selected day is 6 to get 1.5 or 1.2 to calculate total price.
I can't find any similar example how to do this.
Also i will have timepicker what will be inside function and i will need to get value from there.
So how to pass value the right way please?

Try modifying your function (calculate_total_value()), so it accepts two parameters - these two parameters are the values that you modify based on the selected day.
(And also check for typos like bathromm_number_price - they can take a lot of time to "find" later on.)
jQuery(document).ready(function($) {
var cleaning_size;
var bathroom_number;
$(".needs-validation").on("change", "input", function() {
cleaning_size = $("#cleaning-size").val();
bathroom_number = $("#bathroom-numbers").val();
})
$("#datepicker").datepicker({
changeMonth: true,
onSelect: function(selectedDate) {
var date = $(this).datepicker('getDate');
var day = date.getUTCDay();
if (day == '6') {
price_cleaning_size = 1.5;
price_bathroom_number = 26;
} else {
price_cleaning_size = 1.2;
price_bathroom_number = 24;
}
// call the function here, passing the values as parameters
calculate_total_value(price_cleaning_size, price_bathroom_number)
}
});
// alter your function, so it accepts two parameters (price_cleaning_size, price_bathroom_number)
function calculate_total_value(price_cleaning_size, price_bathroom_number) {
var cleaning_size_price = cleaning_size * price_cleaning_size;
var bathromm_number_price = bathroom_number * price_bathroom_number;
var total_price = cleaning_size_price + bathromm_number_price;
$('#total-price strong').text(total_price).val();
}
})
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="needs-validation">
<label for="cleaning-size">Cleaning size:
<input id="cleaning-size" type="number"></label>
<label for="bathroom-numbers">Bathroom number:
<input id="bathroom-numbers" type="number"></label>
</div>
<h2 id="total-price"><strong>0</strong></h2>
<p>Date: <input type="text" id="datepicker"></p>

price_cleaning_size , price_bathroom_number aren't declared anywhere.
It is recommended to declare the variable.(when you use use strict, it's must). Declare it globally.
No where you are calling the function calculate_total_value().
It's good to call it right at bottom of onSelect call back of datepicker.
$("#datepicker").datepicker({
changeMonth: true,
onSelect: function (selectedDate) {
var date = $(this).datepicker('getDate');
var day = date.getUTCDay();
if (day == '6') {
price_cleaning_size = 1.5;
price_bathroom_number = 26;
} else {
price_cleaning_size = 1.2;
price_bathroom_number = 24;
}
calculate_total_value();
}});
When your variable scope is global, There is no point of passing as parameter to the function. Hope there is reason to declare it globally.
Hope this helps you...

Specific days for datepicker with json?

I have a booking form with specific days and I colored my specific days if you click on my datepicker you will see
so my quesiton is I use array list for my specific
var firstDate = ['2017-06-15'];
var lastDate = ['2017-12-20'];
var availabledays = ['2017-06-15', '2017-06-16', '2017-06-23', '2017-06-30', ];
var booked = ['2017-06-16', '2017-06-23', '2017-06-24', '2017-06-25'];
var ssdays = [];
but I have to use json that's why I created a json file as below
dates.json
{
"firstDate": [
{ "field": "2017-06-15"}
],
"lasDate":[
{"field":"2017-12-20"}
],
"availabledays":[
{"field":"2017-06-15"},
{"field":"2017-06-16"},
{"field":"2017-06-23"},
{"field":"2017-06-30"}
],
"booked":[
{"field":"2017-06-16"},
{"field":"2017-06-23"},
{"field":"2017-06-24"},
{"field":"2017-06-25"}
]
}
and my question is how to request from server mys json files and then put into datepicker when focus?
and this is my datepicker example full demo
$(function() {
var firstDate = ['2017-06-15'];
var lastDate = ['2017-12-20'];
var availabledays = ['2017-06-15','2017-06-16','2017-06-23','2017-06-30',];
var booked = ['2017-06-16','2017-06-23','2017-06-24','2017-06-25'];
var ssdays = [];
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth : true,
numberOfMonths: 2,
firstDay:1,
minDate:new Date(firstDate),
maxDate:new Date(lastDate),
onSelect: function( selectedDate ) {
var newdate = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24))
$( "#checkout" ).datepicker( "option", "minDate",date );
},
beforeShowDay : function(date){
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit
if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit
var currDate = y+'-'+m+'-'+d;
if(jQuery.inArray(currDate,availabledays) >= 0){
return [false, "ui-highlight"];
}
if(jQuery.inArray(currDate,booked) >= 0){
return [true, "ui-bos"];
}else{
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth : true,
changeYear : true,
firstDay:1,
numberOfMonths: 2,
minDate:new Date(firstDate),
maxDate:new Date(lastDate),
onSelect: function( selectedDate ) {
$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
},
beforeShowDay : function(date){
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit
if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit
var currDate = y+'-'+m+'-'+d;
if(jQuery.inArray(currDate,booked) >= 0){
return [true, "ui-highlight-donus"];
}
if(jQuery.inArray(currDate,availabledays) >= 0){
return [true, "ui-bos"];
}
if(jQuery.inArray(currDate,ssdays) >= 0){
return [true, "ui-ss-donus"];
}else{
return [true];
}
}
}).on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
});
.form{
width:960px;
margin:120px auto;
}
.form input{
width:250px;
padding:10px;
}
.ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;}
.ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;}
.ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; }
.ui-testtarih .ui-state-default{
background:black !important;
color:#FFF !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
<input type="submit" value="Search" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

I would disable the datepicker and grey them out while the request is happening and enable them after the request completed. The jquery ui datepicker can be disabled with $('#checkout').datepicker('disable').
As far as the data format, you can write a couple functions to pull that data out in a success callback. Something like
$.ajax({
url: "your-data-url.com"
})
.done(function(serverFormattedDays) {
var availableDays = serverFormattedDays.map(function(day) {
return day.field;
}
// code to create/edit/modify datepickers here.
};
will return the available days in the format you want.

momentJS Timer doesn´t work on Firefox

I implemented a countdown timer via Moment.js library, and unfortunately it doesn't work on Firefox.
This is my code:
function createTimer(begin, timeUp) {
var timer = document.getElementById('timer');
var timerDays = document.getElementById('days').children[0];
var timerHours = document.getElementById('hours').children[0];
var timerMinutes = document.getElementById('minutes').children[0];
var timerSeconds = document.getElementById('seconds').children[0];
var intervalID = window.setInterval(function () {
// Difference between timeUp and now
var differenceToTimeUp = moment.duration(timeUp.diff(moment()));
// Difference between begin and now
var differenceToBegin = moment.duration(begin.diff(moment()));
if (differenceToTimeUp.asSeconds() > 0) {
timer.classList.remove('hidden');
} else {
timer.classList.add('hidden');
}
timerDays.innerText = ('0' + differenceToTimeUp.days()).slice(-2);
timerHours.innerText = ('0' + differenceToTimeUp.hours()).slice(-2);
timerMinutes.innerText = ('0' + differenceToTimeUp.minutes()).slice(-2);
timerSeconds.innerText = ('0' + differenceToTimeUp.seconds()).slice(-2);
}, 1000);
}
document.addEventListener('DOMContentLoaded', function () {
// // Comment out for production
// var test1 = moment('2016-02-02 11:00:00');
// var test2 = moment('2016-03-11 11:00:00');
// createTimer(test1, test2);
var now = moment(new Date(moment())).utc().format("YYYY-MM-DD HH:mm:ss");
var firstStart = moment('2016-02-11 11:00:00');
var firstEnd = moment('2016-02-15 17:00:00');
var secondStart = moment('2016-02-16 14:00:00');
var secondEnd = moment('2016-02-17 17:00:00');
if (now > firstStart._i && now < firstEnd._i) {
createTimer(firstStart, firstEnd);
}
});
In debugger I can see that moment is getting the date, so I think it has something to do with the setInterval function.
Any ideas?
UPDATE
Got it working. The mistake was actually not with momentJS. Changing the Text element with .innerText didn´t work on InternetExplorer. Using .textContent fixed it. I hade issues with my custom fonts as well on InternetExplorer when i used .tff. Using .woff worked fine.

jquery plugin multiple instances

I'm trying to create a simple jQuery plugin that allows for multiple instances of a "timepicker". I haven't done much JavaScript OOP in the past so I figured that create this would be an excellent learning experience for me. That being said, I cannot seem to figure out why all instances are affected when I changed the time. This is my first post on StackOverflow so please bear with me.
Here's the code:
(function($) {
//Helper functions
if (typeof String.prototype.endsWith != 'function') {
String.prototype.endsWith = function(str) {
return str.length > 0 && this.substring(this.length - str.length, this.length) === str;
}
}
//Find if area is on the clickable list
var findOne = function(haystack, arr) {
return arr.some(function(v) {
return haystack.indexOf(v) >= 0;
});
};
var Timepicker = function(element, options) {
this.defaults = {
now: new Date()
};
this.element = $(element);
this.createTimepicker();
this.options = $.extend({}, this.defaults, options);
this.timepicker = $('.wicked-picker'); //The outer portion of the picker
this.up = $('.wicked-picker__controls__control-up'); //the up control(s)
this.down = $('.wicked-picker__controls__control-down'); //the down control(s)
this.hoursElem = $('.wicked-picker__controls__control--hours'); //the hours text
this.minutesElem = $('.wicked-picker__controls__control--minutes'); //the minutes text
this.meridiemElem = $('.wicked-picker__controls__control--meridiem'); //the am or pm text
this.canClick = ['timepicker', this.timepicker.selector.substring(1), this.up.selector.substring(1), this.down.selector.substring(1), this.hoursElem.selector.substring(1), this.minutesElem.selector.substring(1), this.meridiemElem.selector.substring(1)]; //the clickable areas
this.selectedHour = ((this.defaults.now.getHours() + 11) % 12) + 1; //the default hour
this.selectedMin = ((this.defaults.now.getMinutes() < 10) ? '0' : '') + this.defaults.now.getMinutes(); //the default minute
this.selectedMeridiem = (this.defaults.now.getHours > 12) ? 'PM' : 'AM'; //the defaut meridiem
this.attach(element); //attach events to this element
};
$.extend(Timepicker.prototype = {
showTimepicker: function(element) {
var timepickerPos = this.element.offset();
//set time to default time (now)
this.setText(element);
//if the timepicker's time differs from the input field's time change it
if (this.getText(element) !== this.getTime()) {
var inputTime = this.getText(element).replace(':', '').split(' ');
var newTime = new Date();
newTime.setHours(inputTime[0]);
newTime.setMinutes(inputTime[2]);
this.setTime(newTime);
}
//Positioning
this.timepicker.css({
'z-index': this.element.zIndex() + 1,
position: 'absolute',
left: timepickerPos.left,
top: timepickerPos.top + element.target.offsetHeight + 5
}).show();
//Time up/down events
//Most likely the area with issues
//Needs to know which instance
$(this.up).on('click', $.proxy(this.changeValue, this, '+', element));
$(this.down).on('click', $.proxy(this.changeValue, this, '-', element));
},
hideTimepicker: function(element) {
var targetClass = element.target.className.split(' ');
//Check if area is clickable before hiding
if (findOne(targetClass, this.canClick) === false) {
this.timepicker.hide();
}
},
//Create only one timepicker per page
createTimepicker: function() {
if ($('.wicked-picker').length === 0)
$('body').append('<div class="wicked-picker"> <p class="wicked-picker__title">Timepicker</p> <ul class="wicked-picker__controls"> <li class="wicked-picker__controls__control"> <span class="wicked-picker__controls__control-up"></span><span class="wicked-picker__controls__control--hours">00</span><span class="wicked-picker__controls__control-down"></span> </li> <li class="wicked-picker__controls__control"> <span class="wicked-picker__controls__control-up"></span><span class="wicked-picker__controls__control--minutes">00</span><span class="wicked-picker__controls__control-down"></span> </li> <li class="wicked-picker__controls__control"> <span class="wicked-picker__controls__control-up"></span><span class="wicked-picker__controls__control--meridiem">AM</span><span class="wicked-picker__controls__control-down"></span> </li> </ul> </div>');
},
//Attach the show and hide picker events
attach: function(element) {
$(element).on('focus', $.proxy(this.showTimepicker, this));
$('body').on('click', $.proxy(this.hideTimepicker, this));
},
//set the timepicker's time
setTime: function(time) {
this.setHours(time.getHours());
this.setMinutes(time.getMinutes());
this.setMeridiem();
},
//get the timepicker's time in the form H : MM : AM || PM
getTime: function() {
return [this.getHours + ' : ' + this.getMinutes() + ' ' + this.getMeridiem()];
},
//set the timepicker's and input field's hours
setHours: function(hours) {
var hour = new Date();
hour.setHours(hours);
var hoursText = ((hour.getHours() + 11) % 12) + 1;
this.hoursElem.text(hoursText);
this.selectedHour = hoursText;
},
//set the timepicker's hours
getHours: function() {
var hours = new Date();
hours.setHours(this.hoursElem.text());
return hours.getHours();
},
//set the timepicker's and input field's minutes
setMinutes: function(minutes) {
var minute = new Date();
minute.setMinutes(minutes);
var minutesText = minute.getMinutes();
var min = ((minutesText < 10) ? '0' : '') + minutesText;
this.minutesElem.text(min);
this.selectedMin = min;
},
//set the timepicker's minutes
getMinutes: function() {
var minutes = new Date();
minutes.setMinutes(this.minutesElem.text());
var minutesText = minutes.getMinutes();
return ((minutesText < 10) ? '0' : '') + minutesText;
},
//set the timepicker's and input field's meridiem
setMeridiem: function() {
var meridiem = this.getMeridiem();
var newMeridiem = (meridiem === 'PM') ? 'AM' : 'PM';
this.meridiemElem.text(newMeridiem);
this.selectedMeridiem = newMeridiem;
},
//set the timepicker's meridiem
getMeridiem: function() {
return this.meridiemElem.text();
},
//change the input field's time based on the arrow selected for each time unit
//input is the input field to be changed
//element is the up or down arrow clicked
//operator is the '+' or '-' sign
changeValue: function(operator, input, element) {
var target = (operator === '+') ? element.target.nextSibling : element.target.previousSibling;
var targetClass = $(target).attr('class');
if (targetClass.endsWith('hours')) {
this.setHours(eval(this.getHours() + operator + 1));
} else if (targetClass.endsWith('minutes')) {
this.setMinutes(eval(this.getMinutes() + operator + 1));
} else {
this.setMeridiem();
}
console.log('changed ' + $(input.target).attr('name'));
this.setText(input);
},
//Set the input field's time
setText: function(input) {
console.log('set ' + $(input.target).attr('name') + ' to ' + this.selectedHour + ' : ' + this.selectedMin + ' ' + this.selectedMeridiem);
$(input.target).val(this.selectedHour + ' : ' + this.selectedMin + ' ' + this.selectedMeridiem);
},
//Get the input field's time
getText: function(input) {
return $(input.target).val();
}
});
//Create timepickers
$.fn.timepicker = function(options) {
return this.each(function() {
new Timepicker(this, options);
});
};
}(jQuery));
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="event-start-time" id="event-start-time" class="form-input timepicker grid-5" />
<input type="text" name="event-end-time" id="event-end-time" class="form-input timepicker grid-5" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.timepicker').timepicker({});
</script>
</body>
</html>

I was able to solve the problem by removing the previous up and down event click event handlers and then reapplying the new click event handlers. This was accomplished by changing
$(this.up).on('click', $.proxy(this.changeValue, this, '+', element));
$(this.down).on('click', $.proxy(this.changeValue, this, '-', element));
to
$(this.up).off('click').on('click', $.proxy(this.changeValue, this, '+', element));
$(this.down).off('click').on('click', $.proxy(this.changeValue, this, '-', element));
Thanks for all the advice!

Highlight <TR> entire week datepicker

I have a datepicker that is fully functional and is working whereby you can select an entire commencing working week (Mon-Fri). What I am now trying to do is extend it a little further so that when I click on a specific week. It will highlight that entire . I have it paritally working which looks like the following: Calandar preivew. It can be seen that the problem I am having is that the table row to me seems to be doing a odd, even, odd even. As for the first week I highlight the row is highlighted in red and the cells are hihglighted in yellow. Then the week afer that it work fines and then if I was to select the week after that the same would be repeated. I tried checking the jquery-ui-1.8.4.custom.css and the jquery-ui.css, and had no luck. What seems to confuse me is why are the cells being highlighted in yellow? The code follows for my datepicker.
Javascript:
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$( ".week-picker" ).datepicker().click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-calendarr-day").siblings().find('a').addClass('white');
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
HTML
<div class="datepicker borderbox">
<b><center>Hours for Week commencing: <span id="startDate"></span></center></b>
<div class="week-picker"></div>
</div>
CSS
.highlight {
border: 1px solid red;
}
.white {
background: white !important;
}
I have tried looking at the following stackoverflow question Related stackoverflow. Had no luck with this, as the link was broken and also tried viewing the it in JSfiddle. Further to this the way I have set my datepicker is different.
I am intially trying to get my calendar to work like this But for some reason when I try do this I get the following. Is this something to do with the css
Update2
Calendar & Firebug output

Is this what you want?
http://jsfiddle.net/william/YQ2Zw/2/
There were a couple of things that went wrong:
The ui-datepicker-current-day class was applied to a <td> element, so it only needs to travel one level up to find the <tr>, so I took away one call to parent():
$(".ui-datepicker-current-day").parent().addClass('highlight');
You set multiple days with the ui-datepicker-current-day class. That was why I needed to use the :eq(0) selector to only select the first element:
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
Also, you were calling the wrong class for the statement above.