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...

Customize title in FullCalendar

I have some trouble with customize FullCalendar. Default title in FullCalendar its 'h2' with month, year and prev, next buttons.
I need to transform 'h2' in separate elements (p with year separately and p with month same);
And also I need change default view prev month and next month buttons to buttons with that month name.
I will be glad to any help.
Below is my code: (Month name in source is not English.)
var monthNames = ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'];
var calendarDate = new Date()
var monthNum = calendarDate.getMonth();
var prevMonth = monthNames[monthNum - 1];
var nextMonth = monthNames[monthNum + 1];
$(document).ready(function() {
$('#calendar').fullCalendar({
firstDay: 1, /* первый день недели */
defaultView: 'month',
header: {
left: 'prev,next',
center: 'title',
},
viewRender: function (view, element) {
var monthNames = ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'];
var currentMonth = $("#calendar").fullCalendar('getDate').month();
var customMonth = monthNames[currentMonth];
$('.fc-prev-button, .fc-next-button').click(function(){
prevMonth = monthNames[customMonth - 1];
nextMonth = monthNames[currentMonth + 1];
});
},
monthNames: ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'],
monthNamesShort: ['Січ.','Лют.','Бер.','Квіт.','Трав.','Черв.','Лип.','Серп.','Вер.','Жовт.','Лис.','Груд.'],
dayNames: ["Неділя","Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота"],
dayNamesShort: ["НД","ПН","ВТ","СР","ЧТ","ПТ","СБ"],
buttonText: {
prev: prevMonth,
next: nextMonth
},
});
});
images enter image description here
enter image description here

You can leave the title empty and then inside your viewRender function, you can do this:
viewRender: function(view, element){
$('.fc-toolbar .fc-center').append('/* inside this, you can append any elements you need for your title */');
}

Set the min date of the other datepicker 1 day ahead of my first datepicker

I'm using Materializecss. Now I'm creating a hotel reservation system. What I want is, when I select a date on my DateIn Datepicker, the DateOut Datepicker min date should be 1 day ahead of the date selected. At first selection it is working. But when I try to select a date of check in higher than the selected date out, the min date for dateout picker wont change.
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
min : new Date(),
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
$('#dp_ci').change(function(){
selected_ci_date ="";
selected_ci_date = $('#dp_ci').val();
if (selected_ci_date != null)
{
var cidate = new Date(selected_ci_date);
alert(cidate);
$("#dp_co").val("");
$("#dp_co").removeAttr("disabled");
min_codate = "";
min_codate = new Date();
min_codate.setDate(cidate.getDate()+1);
$('#dp_co').pickadate(
{
min : min_codate,
selectMonths: true, // Creates a dropdown to control month
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
$('#dp_co').change(function(){
if ($('#dp_co').val() != null)
{
var ci = new Date($('#dp_ci').val());
var co = new Date($('#dp_co').val());
var noOfdays = co.getDate() - ci.getDate() ;
alert(noOfdays);
}
});
}
})
EDIT:
Example:
1st Select:
dp_ci: September 27, 2017 (selected)
dp_co(min): September 28, 2017 (the dates behind are disabled)
dp_co: September 28, 2017 (selected)
2nd Select:(I will select on dp_ci again)
dp_ci: September 29, 2017 (selected)
dp_co(min): September 28, 2017 (still which was supposed to be September 29)
UPDATE: I found an answer that was able to solve my problem. One only thing is the min date of the dp_co shouldn't allow same date with dp_ci: any solutions?
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date()
});
var from_$input = $('#dp_ci').pickadate(),
from_picker = from_$input.pickadate('picker')
var to_$input = $('#dp_co').pickadate(),
to_picker = to_$input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') )
{
to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') )
{
from_picker.set('max', to_picker.get('select'))
}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event)
{
if ( event.select )
{
to_picker.set('min', from_picker.get('select'))
}
else if ( 'clear' in event )
{
to_picker.set('min', false)
}
})
to_picker.on('set', function(event)
{
if ( event.select )
{
from_picker.set('max', to_picker.get('select'))
}
else if ( 'clear' in event )
{
from_picker.set('max', false)
}
})
Got the code here:CodePen

You need to save the picker object on both the start-picker and end-picker, and when the startpicker change - you only need to set the min value of the end picker:
var startdate = $('#dp_ci').pickadate('picker');
var enddate = $('#dp_co').pickadate('picker');
$('#dp_ci').change(function() {
if (selected_ci_date != null) {
enddate.set('min', min_codate);
}
})
Here is the complete example:
$('#dp_ci').pickadate({
selectMonths: true, // Creates a dropdown to control month
min : new Date(),
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
})
var startdate = $('#dp_ci').pickadate('picker');
$('#dp_co').pickadate({
min : new Date(),
selectMonths: true, // Creates a dropdown to control month
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
})
var enddate = $('#dp_co').pickadate('picker');
$('#dp_ci').change(function() {
selected_ci_date ="";
selected_ci_date = $('#dp_ci').val();
if (selected_ci_date != null) {
var cidate = new Date(selected_ci_date);
alert(cidate);
$("#dp_co").val("");
$("#dp_co").removeAttr("disabled");
min_codate = "";
min_codate = new Date();
min_codate.setDate(cidate.getDate()+1);
enddate.set('min', min_codate);
}
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div class = "row">
<div class ="col s6">
<label>Date of Check-in </label>
<input type="text" class="datepicker" id="dp_ci">
</div>
<div class ="col s6">
<label>Date of Check-out </label>
<input disabled="true" type="text" class=" datepicker" id="dp_co">
</div>
</div>

$('#txt_performanceDayFlex1').daterangepicker({
"locale": {
"format": "MM/DD/YY"
},
singleDatePicker: true,
minDate: new Date()
}, function (start, end, label) {
$scope.PerformanceStartDate = start.format('MM/DD/YY');
$scope.minimumDate = minimumFormatRequestDate( $scope.PerformanceStartDate);
LodaDate(); //You need to reload the End Date then it Behave Properly and you can add one day head in $scope.minimumDate this in same format
ResetDateAndtime(1);
$scope.$apply();
});
function LodaDate() {
$('#txt_performanceDayFlex2').daterangepicker({
"locale": {
"format": "MM/DD/YY"
},
singleDatePicker: true,
minDate: $scope.minimumDate,
endDate: new Date()
}, function (start, end, label) {
$scope.PerformanceEndDate = start.format('MM/DD/YY');
$scope.$apply();
});
function minimumFormatRequestDate(date) {
if (date != undefined && date != null) {
var newDate = date.split('.').reverse().join('/')
var d = new Date(newDate),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [day, month, year].join('-');
} else {
return 'NA';
}
}

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!

Disabling times in a timepicker on current day doesn't work properly

<body>
<p id="datepairExample">
<input type="text" id="date" class="date start" /> <input id="time"
type="text" class="time start" />
</p>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/datepair.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/jquery.datepair.js"></script>
<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/site.js"></script>
<script>
$(document).ready(function() {
$('#datepairExample .time').timepicker({
'showDuration' : true,
'timeFormat' : 'g:ia'
});
$('#datepairExample .date').datepicker({
startDate : "0d"
});
$('#datepairExample .date').datepicker().on('changeDate', function(ev) {
var x = new Date();
var s = document.getElementById("date").value + "";
if (s.charAt(0) == '0') {
s = s.substring(1, s.length);
}
if (x.toLocaleDateString() == s) {
alert("abc");
$('#datepairExample .time').timepicker({
'disableTimeRanges' : [ [ '12am', x ] ]
});
}
/* else{
alert("pqr");
$('#datepairExample .time').timepicker({
'showDuration' : true,
'timeFormat' : 'g:ia'
});
} */
});
//$("#datepairExample .date").datepicker("option", "startDate", -1);
/*$(function() {
$("#datepairExample .date").datepicker({
numberOfMonths : 3,
showButtonPanel : true,
minDate : x
});
}); */
// initialize datepair
$('#datepairExample').datepair();
});
// initialize input widgets first
</script>
Disabling time works fine, if only the current day is selected first in the date picker and doesn't work if the current day is selected after any date.
So basically, the times are being disabled only if they are the first things to be selected, and the dates will not be enabled after being disabled even if the date selected is not the current date.
I've used 'alert' statements in order to check if the blocks are being executed or not by selecting the dates again, they are getting executed, but no change in the output. Thanks in advance for anyone who is going to help me in this.

Try this
function getCurrentTime(date) {
var hours = date.getHours(),
minutes = date.getMinutes(),
ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
return hours + ':' + minutes + ' ' + ampm;
}
var timeOptions = {
'timeFormat': 'h:i A',
'disableTimeRanges': [['12am', getCurrentTime(new Date())]]
};
& you can use this
var timeOptions = {
'timeFormat': 'h:i A',
'minTime': getCurrentTime(new Date())
};