I have the following problem: I'm using jQuery Datepicker so that a user can select flight dates. The only problem I am facing is that when a user selects the dates, and then clicks the top arrows to go to the previos or next months, then the dates(red colored) which the user selects, go back to the original. How can I fix this? Please help. I am providing a Fiddle: FIDDLE HERE
$(document).ready(function () {
var start_date = "2014-10-04";
var end_date = "2014-10-20";
var date1 = new Date(start_date);
var date2 = new Date(end_date);
var actual_end_date = new Date(end_date);
actual_end_date.setDate(actual_end_date.getDate() + 2);
var pre_nights = 1;
var post_nights = 2;
var msecPerDay = 24 * 60 * 60 * 1000;
date2.setDate(date2.getDate() + 1);
if (post_nights > 0) {
date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
}
var flight_end = new Date(date2.getTime() + msecPerDay);
if (pre_nights > 0) {
date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));
}
var post_night_dates_arr = [];
var pre_night_dates_arr = [];
function date_check() {
$(".ui-state-active").removeClass("ui-state-active");
$('.ui-datepicker-group').each(function () {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function () {
var this_elem = $(this);
var this_date = new Date($(this).data('year') + "-" + ($(this).data('month') + 1) + "-" + $(this).text());
var this_end_date = new Date(this_date);
this_end_date.setDate(this_end_date.getDate() + 1);
var current_this_end_date = this_end_date.getFullYear() + "-" + (this_end_date.getMonth() + 1) + "-" + ("0" + this_end_date.getDate()).slice(-2);
var current_day = this_date.getFullYear() + "-" + (this_date.getMonth() + 1) + "-" + ("0" + this_date.getDate()).slice(-2);
if (pre_night_dates_arr.length > 0 || post_night_dates_arr.length > 0) {
$.each(pre_night_dates_arr, function (key, val) {
if (current_day === val) {
this_elem.addClass("extra_nights_color");
}
});
$.each(post_night_dates_arr, function (key, val) {
if (current_this_end_date === val) {
this_elem.addClass("extra_nights_color");
}
});
}
});
});
}
$("#datepicker").datepicker({
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
defaultDate: date1,
beforeShowDay: function (date) {
var current_day = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + ("0" + date.getDate()).slice(-2);
var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2);
var flight_end_mod = flight_end.getFullYear() + "-" + (flight_end.getMonth() + 1) + "-" + ("0" + flight_end.getDate()).slice(-2);
if (current_day == flight_start) {
var arr = [true, "flight_dept_color"];
} else if (date > date1 && date < date2) {
if (pre_nights > 0) {
pre_night_dates_arr.push(current_day);
pre_nights--;
var arr = [true, "extra_nights_color"];
} else if (post_nights > 0) {
var flight_end_date = new Date(flight_end);
flight_end_date.setDate(flight_end_date.getDate() - post_nights);
var flight_end_date_mod = flight_end_date.getFullYear() + "-" + (flight_end_date.getMonth() + 1) + "-" + ("0" + flight_end_date.getDate()).slice(-2);
if (current_day == flight_end_date_mod) {
post_night_dates_arr.push(current_day);
post_nights--;
var arr = [true, "extra_nights_color"];
} else {
var arr = [true, "tour_dates_color"];
}
} else {
var arr = [true, "tour_dates_color"];
}
} else if (current_day == flight_end_mod) {
var arr = [true, "flight_return_color"];
} else {
var arr = [true, ""];
}
return arr;
},
onSelect: function (dateStr, inst) {
inst.inline = false;
date_check();
console.log("test");
$(".ui-datepicker-calendar tbody td:has(a)").each(function () {
var this_date = $(this).data('year') + "-" + ("0" + ($(this).data('month') + 1)).slice(-2) + "-" + ("0" + $(this).text()).slice(-2);
var date2_mod = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + ("0" + date2.getDate()).slice(-2);
if (pre_night_dates_arr.length > 0) {
if (this_date < pre_night_dates_arr[0]) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
$(this).addClass("flight_dept_color");
}
} else if (this_date > date2_mod) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
$(this).addClass("flight_return_color");
}
}
} else {
var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2);
if (this_date <= flight_start) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
$(this).addClass("flight_dept_color");
}
} else if (this_date > date2_mod) {
if (this_date == dateStr) {
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
$(this).addClass("flight_return_color");
}
}
}
});
}
});
date_check();
$('.ui-corner-all').on('click', function (e) {
date_check();
});
});
I came up with this solution. Thanks for whoever took the time to look over this. Let me know if you can re modify this code even better.
$(document).ready(function() {
var selected_dept_date = "";
var selected_return_date = "";
var actual_start_date = "2014-10-04";
var actual_end_date = "2014-10-20";
var actual_end_date_DATE = new Date(actual_end_date);
actual_end_date_DATE.setDate(actual_end_date_DATE.getDate() + 1);
var time = "T00:00:00";
var start_date = actual_start_date + time;
var end_date = actual_end_date + time;
var date1 = new Date(start_date);
var date2 = new Date(end_date);
var pre_nights = 5;
var post_nights = 2;
var pre_nights_count = pre_nights;
var post_nights_count = post_nights;
var msecPerDay = 24 * 60 * 60 * 1000;
date2.setDate(date2.getDate() + 1);
function getAllDays(d1, d2) {
var s = new Date(d1);
s.setHours(0, 0, 0, 0);
var e = new Date(d2);
e.setHours(0, 0, 0, 0);
var a = [];
while (s < e) {
a.push(s);
s = new Date(s.setDate(s.getDate() + 1));
}
return a;
}
var pre_night_dates_arr = [];
var post_night_dates_arr = [];
if (pre_nights > 0) {
date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));
$.each(getAllDays(date1, date2), function(key, val) {
if (pre_nights_count > 0) {
pre_night_dates_arr.push(val);
pre_nights_count--;
} else {
return false;
}
});
}
if (post_nights > 0) {
date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
$.each(getAllDays(date1, date2), function(key, val) {
if (post_nights_count > 0) {
if (val.getTime() > actual_end_date_DATE.getTime()) {
post_night_dates_arr.push(val);
post_nights_count--;
}
} else {
return false;
}
});
}
var start_date_after_settings = new Date(getAllDays(date1, date2)[0]);
start_date_after_settings.setDate(start_date_after_settings.getDate() - 1);
var end_date_after_settings = new Date($(getAllDays(date1, date2)).last()[0]);
end_date_after_settings.setDate(end_date_after_settings.getDate() + 1);
function load_tour_dates() {
$(".ui-state-active").removeClass("ui-state-active");
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
$.each(getAllDays(date1, date2), function(key, val) {
if (pre_night_dates_arr.length > 0) {
$.each(pre_night_dates_arr, function(key2, val2) {
if (this_date.getTime() == val2.getTime()) {
this_elem.addClass("extra_nights_color");
}
});
}
if (this_date.getTime() == val.getTime()) {
this_elem.addClass("tour_dates_color");
return false;
}
if (post_night_dates_arr.length > 0) {
$.each(post_night_dates_arr, function(key2, val2) {
if (this_date.getTime() == val2.getTime()) {
this_elem.addClass("extra_nights_color");
}
});
}
});
});
});
}
function load_selected_start_dates() {
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
if (selected_dept_date instanceof Date) {
if (this_date.getTime() == selected_dept_date.getTime()) {
this_elem.addClass("flight_dept_color");
}
} else {
if (this_date.getTime() == start_date_after_settings.getTime()) {
this_elem.addClass("flight_dept_color");
}
}
if (selected_return_date instanceof Date) {
if (this_date.getTime() == selected_return_date.getTime()) {
this_elem.addClass("flight_return_color");
}
} else {
if (this_date.getTime() == end_date_after_settings.getTime()) {
this_elem.addClass("flight_return_color");
}
}
});
});
}
function select_date(date) {
var curr_date_mod = new Date(date);
$('.ui-datepicker-group').each(function() {
$(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
var this_elem = $(this);
var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
if (curr_date_mod.getTime() <= start_date_after_settings.getTime()) {
if (this_date.getTime() === curr_date_mod.getTime()) {
selected_dept_date = curr_date_mod;
$(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
this_elem.addClass("flight_dept_color");
}
}
if (curr_date_mod.getTime() >= end_date_after_settings.getTime()) {
if (this_date.getTime() === curr_date_mod.getTime()) {
selected_return_date = curr_date_mod;
$(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
this_elem.addClass("flight_return_color");
}
}
});
});
}
$("#datepicker").datepicker({
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
defaultDate: date1,
onSelect: function(dateStr, inst) {
inst.inline = false;
var curr_date = dateStr.replace("-", ",");
var curr_date_mod = new Date(curr_date);
select_date(curr_date_mod);
}
});
function must_runs() {
load_tour_dates();
load_selected_start_dates();
if (selected_dept_date instanceof Date) {
select_date(selected_dept_date);
}
if (selected_return_date instanceof Date) {
select_date(selected_dept_date);
}
}
must_runs();
$(document).delegate('.ui-datepicker-prev', 'click', function() {
must_runs();
});
$(document).delegate('.ui-datepicker-next', 'click', function() {
must_runs();
});
});
Related
I want to format the time from 24 hours to 12 hours with AM/PM and display it in popover.
This is my code:
eventMouseover: function (event, jsEvent) {
var t1 = event.start;
var t2 = event.end;
$(this).popover({
html:true,
placement: 'left',
trigger: 'hover',
content: t1 + ' - ' + t2,
container: '#calendar'
}).popover('toggle');
}
I search for the answers here but it doesnt work in popover. So i decided to ask for it.
This is the code i used.
It works on here, but not in popover.
eventRender: function(event, element) {
var t1 = event.time;
var t2 = event.time2;
var tmpArr = t1.split(':'), time12;
if(+tmpArr[0] == 12) {
time12 = tmpArr[0] + ':' + tmpArr[1] + 'P';
} else {
if(+tmpArr[0] == 00) {
time12 = '12:' + tmpArr[1] + 'A';
} else {
if(+tmpArr[0] > 12) {
time12 = (+tmpArr[0]-12) + ':' + tmpArr[1] + 'P';
} else {
time12 = (+tmpArr[0]) + ':' + tmpArr[1] + 'A';
}
}
}
var tmpArrs = t2.split(':'), time13;
if(+tmpArrs[0] == 12) {
time13 = tmpArrs[0] + ':' + tmpArrs[1] + 'P';
} else {
if(+tmpArrs[0] == 00) {
time13 = '12:' + tmpArrs[1] + 'A';
} else {
if(+tmpArrs[0] > 12) {
time13 = (+tmpArrs[0]-12) + ':' + tmpArrs[1] + 'P';
} else {
time13 = (+tmpArrs[0]) + ':' + tmpArrs[1] + 'A';
}
}
}
element.find('.fc-content').append(t1 + "-" + t2 +);
}
Assuming you have moment.js included in your webpage (as FullCalendar needs it in any case) use the following code in place of declaring var t1 and var t2
var t1 = $.fullCalendar.moment(event.start).format("h:mm A")
var t2 = $.fullCalendar.moment(event.end ).format("h:mm A")
P.S. You don't need to work out the 12 hour format manually, moment.js does this for you
I made a javascript code to create some html element in parent iframe based on user selection from an iframe in a popup.
My code is given below.
The each loop may contain 50 to 150 iteration. Sometimes when I call function AddProcedures the Mozilla crashes during iteration, Is there any way to fix this issue or to reduce the browser load. I tried to put setTimeout after some code blocks but it didn't help.
I have also changed the for loop to jquery each, just to try if that helps.
var tot_codes = 0;
function doAddProcedure(thisVal,resolve){
var enc_id = $("#cpt_encounter").val();
var rowId = window.parent.$("[data-encounterBilled='"+ enc_id +"']").closest('tr').attr('id'); // table row ID
var recalc = parseInt(rowId.substring(rowId.indexOf('id-')+3));
var countval = $("#last_id").val();
//Load issue Fix
//Old code
//for (i = 0; i < document.cpt.elements.length; i++) {
//if (document.cpt.elements[i].type == "checkbox") {
//if (document.cpt.elements[i].checked == true) {
$('#cpt input:checkbox:checked').each(function(){
setTimeout(function() { }, 100);
var currentCodeMod = $(this).attr("data-codemod");
var currentCodeTypid = $(this).attr("data-codeTypeid");
if (currentCodeMod == null)
return;
tot_codes++;
var nextcntval = parseInt(countval) + 1;
var code_no = $(this).attr("id").replace("cpt_chkbx", "");
var Code = $("#codeVal" + code_no).val();
var just = $("#codeType" + code_no).val();
var categoryId = $("#codeType" + code_no).data("categoryid"); //Added to get category //Bug Fix
var Name = $("#cpttext" + code_no).val();
var codedisp = Code + ':' + Name;
var Modifier = '';
//if($("#modifier_setngs").val() == 1){
var Modifier1 = $("#modcpt1"+code_no).val() != '' ? $("#modcpt1"+code_no).val() + ":" : '';
var Modifier2 = $("#modcpt2"+code_no).val() != '' ? $("#modcpt2"+code_no).val() + ":" : '';
var Modifier3 = $("#modcpt3"+code_no).val() != '' ? $("#modcpt3"+code_no).val() + ":" : '';
var Modifier4 = $("#modcpt4"+code_no).val() != '' ? $("#modcpt4"+code_no).val() + ":" : '';
Modifier = Modifier1 + Modifier2 + Modifier3 + Modifier4;
//}
var codetableid = $("#code_tab_id" + code_no).val();
var j = countval; /* lineitem wise uniqid */
//var encounter = window.parent.$('#codetype-' + j).closest('tr.charge-entry-row').find('.expand-actions').attr('data-encounterid');
var encounter = enc_id;
var codeforarr = encounter + ':' + just + ':' + Code + '::' + Modifier;
window.parent.pushToArray(codeforarr);
var f = 0;
$(window.parent.$("#codetype-" + countval).parents().find('.inner-table .charge-entry-row')).each(function() {
//console.log($(this).find('.inputStringHidden').val() + '/' + codeforarr);
if ($(this).find('.inputStringHidden').val() == codeforarr) {
var exis_row_id = $(this).find('.inputStringHidden').attr('id').split('inputStringHidden-');
j = exis_row_id[1].toString();
f = 1;
$(this).find('.front_pay_codes_display').trigger('click');
}
});
if (f == 0) {
if (window.parent.document.getElementById('inputStringHidden-' + countval).value != '') {
window.parent.$("#codetype-" + countval).children().parent().parent().parent().siblings().find('.addnew-row').attr('data-rowadd', 'fromdb').trigger("click");
countval = parseInt(countval) + 1;
j = countval.toString();
}
window.parent.$("#add-" + countval).trigger("click");
window.parent.$("#codetype-" + (countval)).val(currentCodeTypid);
window.parent.$("#codetype-" + countval).trigger("change");
}
window.parent.document.getElementById('inputString' + j).value = codedisp;
window.parent.document.getElementById('category-' + j).value = categoryId; //Added to set category //Bug Fix
window.parent.document.getElementById('string_id' + j).value = Code;
window.parent.document.getElementById('string_value' + j).value = Name;
window.parent.document.getElementById('inputStringHidden-' + j).value = codeforarr;
window.parent.document.getElementById('codetableid-' + j).value = codetableid;
window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.val-change-bit').val(1);
setTimeout(function() {}, 100);
window.parent.$("#suggestions" + j).hide();
window.parent.$("#inputString" + j).focus();
var uniqidHidden = window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.uniqid-hidden').val();
window.parent.$('#add-modifier' + j).parent().find('.displaymode-elem').text(Modifier);
//if($("#modifier_setngs").val() == 1){
if (f == 0) {
window.parent.$('#add-modifier' + j).parent().find('.displaymode-elem').addClass('area-hide');
}else{
window.parent.$('#add-modifier' + j).parent().find('.displaymode-elem').removeClass('area-hide');
}
window.parent.$('#modifiers' + uniqidHidden).val(Modifier);
arr = Modifier.split(':');
window.parent.$('#modifier-' + uniqidHidden + '-1').val(arr[0]);
window.parent.$('#modifier-' + uniqidHidden + '-2').val(arr[1]);
window.parent.$('#modifier-' + uniqidHidden + '-3').val(arr[2]);
window.parent.$('#modifier-' + uniqidHidden + '-4').val(arr[3]);
//}
var eclaimPlanActive = window.parent.$('#eclaimPlanActive').val();
var price = $("#cpt_price" + code_no).val();
var price_level = $("#pricelevelhidden" + code_no).val();
if (price == 0 || price == null)
price = 0;
window.parent.$('#price-' + j).val(price);
window.parent.$('#bill-pricelevel-' + j).val(price_level);
/** Charge Total **/
var chargeTotal = window.parent.$('#charge-total').text().replace(/[\s\,]/g, '').trim();
if (chargeTotal == '')
chargeTotal = parseFloat(0);
var tempChargeTotal = parseFloat(chargeTotal) + parseFloat(price);
window.parent.$('#charge-total span').html(tempChargeTotal);
/** End **/
var units = $("#cpt_units" + code_no).val(); //data[0]['units']
if (units == 0 || units == null)
units = 1;
window.parent.$('#qty-' + j).val(units);
var tax = 0;
var disc = 0;
setTimeout(function() { }, 100);
if (window.parent.$('#tax-' + j).length > 0)
tax = window.parent.$('#tax-' + j).val().replace(/[\s\,]/g, '');
if (window.parent.$('#discount-' + j).length > 0)
disc = window.parent.$('#discount-' + j).val().replace(/[\s\,]/g, '');
var amount = price * units;
amount = amount + ((amount * tax) / 100);
if (disc > 0) {
var p = price * units;
var dc = ((p * disc) / 100);
amount = amount - dc;
}
/** Discount Total **/
var disTotal = window.parent.$('#discount-total').text().replace(/[\s\,]/g, '').trim();
if (disTotal == '')
disTotal = parseFloat(0);
var tempDisTotal = parseFloat(disTotal) + parseFloat(dc);
if (isNaN(tempDisTotal) == true) {
tempDisTotal = '0.00';
}
window.parent.$('#discount-total').html(tempDisTotal);
/** End **/
if (!parseFloat(window.parent.$('#lineitempaid-' + j).val()))
window.parent.$('#lineitempaid-' + j).val('0.00');
window.parent.$('#total-' + j).val(amount);
window.parent.$('#remainder-' + j).val(amount);
window.parent.$('#hidremainder-' + j).val(amount);
//insurance and patient_share
if (eclaimPlanActive == '1') {
var codetableid = window.parent.$('#codetableid-' + j).val();
var parentRowVal = parseInt(window.parent.$('#codetableid-' + j).closest('tr').find('.row_value').attr('data-rowvalue')) - 1;
var insData1 = window.parent.$('tr#row-id-' + parentRowVal + ' .encounter').attr('data-insdata1');
window.parent.getBenefitCategoryOfCode(j, codetableid, insData1);
if (window.parent.$('#have-benefit').val() == '0') {
var insData2 = window.parent.$('tr#row-id-' + parentRowVal + ' .encounter').attr('data-insdata2');
window.parent.getBenefitCategoryOfCode(j, codetableid, insData2);
}
}
var passParams = '';
window.parent.calculate('qty-' + j, passParams);
//Updating the title
window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.fi-searchitems').attr('data-original-title', codedisp);
if (f == 0) {
//Display DIv :: Relace with new values
var cloneLabel = window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.show_label').clone();
//In Edit Mode
if (cloneLabel.find('.displaymode-elem').length > 0) {
var $max_length = 16;
var trucncateCode = Name;
if (trucncateCode.length > $max_length)
trucncateCode = trucncateCode.substring(0, $max_length) + '...';
cloneLabel.find('.front_pay_codetype').text(just + ":");
cloneLabel.find('.front_pay_code').text(trucncateCode);
cloneLabel.find('.displaymode-elem').removeClass('area-hide');
cloneLabel.removeClass('area-hide');
cloneLabel.find("input[name='code_type']").val(just).attr('id', 'code_type-' + j);
cloneLabel.find("input[name='string_id']").val(Code).attr('id', 'string_id-' + j);
cloneLabel.find("input[name='string_value']").val(Name);
var dataType = $("#inputString" + j).closest('tr.charge-entry-row').find('.data_type').val();
if (dataType == "lab") {
var lab = $("select[name='lab_type']").find('option:selected').val();
if (cloneLabel.find("input[name='lab_type']").length > 0) {
cloneLabel.find("input[name='lab_type']").val(lab);
} else {
cloneLabel.append('<input type="hidden" name="lab_type" class="lab_type" value="' + lab + '">');
}
} else {
cloneLabel.find("input[name='lab_type']").remove();
}
setTimeout(function() { }, 100);
//Making the view
cloneLabel.removeClass('area-hide');
window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.front_pay_codes_editelem').removeClass('area-show').addClass('area-hide');
window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.show_label').replaceWith(cloneLabel);
window.parent.$("#inputString" + j).closest('tr.charge-entry-row').find('.show_autosuggest').html('');
}
window.parent.$("#codetype-" + countval).children().parent().parent().parent().siblings().find('.addnew-row').attr('data-rowadd', 'fromdb').trigger("click");
countval = nextcntval.toString();
}
else {
window.parent.$("#suggestions" + j).hide();
countval = countval.toString();
}
setTimeout(function() { }, 150);
});
window.parent.reCalculatePlanEncounterWise(recalc);
resolve("Success!");
}
function doAddPromise(thisVal){
return new Promise(function(resolve){
doAddProcedure(thisVal,resolve);
});
}
function AddProcedures(thisval)
{
$('#procedureSaveButton').text('Processing....');
// $('.fa-spinner').removeClass('hide');
top.ShowAjaxLoader('Loading..');
setTimeout(function(){
}, 2000);
//top.ShowAjaxLoader('Loading..');
setTimeout(function(){
$.when(doAddPromise(thisval)).done(function(){
if (tot_codes > 0) {
window.parent.phFrntpayClosePopup();
top.notification('Successfully added the procedures.');
//top.HideAjaxLoader('Loading..');
top.HideAjaxLoader();
$('body').removeClass('modal-open');
} else {
top.notification('Please select atleast one procedure.');
$('#procedureSaveButton').text('Add Procedures');
//$('.fa-spinner').addClass('hide');
top.HideAjaxLoader();
}
});
}, 10);
}
I am working on a booking system for a hotel. I want the booking system to be like the one on acehotel.com. Mine works, but when I click on "Uitcheck dag" (day of checking out) it does not show the day of checking in. Here is a link to my page: http://webdesign.kam-online.net/DatePicker/
$(document).ready(function() {
var dates = [];
var dateArray = [];
currentDate = new Date();
var tips = ['some description','some other description'];
$("#aantallen").hide();
$("#datepicker").hide();
$("#datepicker2").hide();
$("#AantalMensen").click(function(){
$("#datepicker2").hide();
$("#datepicker").hide();
$("#aantallen").show();
});
$("#IncheckDag").click(function(){
$("#datepicker2").hide();
$("#aantallen").hide();
$("#datepicker").show();
});
$("#UitcheckDag").click(function(){
$("#datepicker").hide();
$("#aantallen").hide();
$("#datepicker2").show();
});
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf())
dat.setDate(dat.getDate() + days);
return dat;
}
function getDates(startDate, stopDate) {
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push( new Date (currentDate) );
currentDate = currentDate.addDays(1);
}
return dateArray;
}
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
onSelect: function () {
var pickedDate = $("#datepicker").datepicker("getDate");
if (pickedDate > currentDate) {
dates.push(pickedDate);
dateArray.push(pickedDate);
alert(dates[0]);
} else {
alert("Error");
}
}
});
$("#datepicker2").datepicker({
dateFormat: 'mm/dd/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
onSelect: function () {
var pickedSecondDate = $("#datepicker2").datepicker("getDate");
if (pickedSecondDate > dates[0])
{
dates.push(pickedSecondDate);
alert(dates[1]);
var start = dates[0];
var end = dates[1];
getDates(start, end);
} else {
alert("Error");
}
}
});
function highlightDays(date) {
for (var i = 0; i < dateArray.length; i++) {
if (new Date(dateArray[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
});
It is throwing an error in the below code snippet in your HTML( Function searchRoom())
document.getElementById("Result").innerHTML = "Aantal Volwassenen " + volwassenen + "<br>\
Aantal Kinderen " + kinderen + "<br>\
Incheck Datum " + checkinDate + "<br>\
Uitcheck Datum " + checkoutDate + "<br
it is not properly ended.
document.getElementById("Result").innerHTML = "Aantal Volwassenen " + volwassenen + "<br>\
Aantal Kinderen " + kinderen + "<br>\
Incheck Datum " + checkinDate + "<br>\
Uitcheck Datum " + checkoutDate + "<br>";
Try this once
I have code that will generate a random unique id.. but is there a way I can edit this code so that it grabs a date in a specific way like yyyy-mm-dd-0001. the last 4 digits I want it to add 1 each time the generateid button is clicked. so it will change to 0002. Here is the current code I have. Is there a function that can grab the date automatically?
var counter = 0000;
function Counter() {
if((document.getElementById("generateid").clicked == true)
{
Counter++
return counter;
}
}
function Month() {
var m = new Date();
var mm = m.getMonth() + 1;
if (mm < 10) {
mm = '0' + mm;
return mm;
}
}
function Year() {
var y = new Date();
var yy = y.getFullYear();
return yy;
}
function Day() {
var d = new Date();
var dd = d.getDate();
return dd;
}
//generate id
function guidGenerator() {
var theID = (Year() + "-" + Month() + "-" + Day() + "-" + Counter);
return theID;
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator();
document.getElementById("generateid").disabled = true;
}
You can use the following object:
var idGenerator = {
seq: 0,
generateId: function () {
this.seq++;
return (new Date()).toISOString().substring(0, 10) + '-' + ('000' + this.seq).substr(-4)
}
}
after declaration like this, try
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + idGenerator.generateId();
document.getElementById("generateid").disabled=true;
}
If you are asking for a way to keep track of how many times an ID is generated by all your site visitors using javascript alone then, no it is not possible without tying in some back end to keep track. However, the following code will do what you ask per visitor.
jsfiddle
var ttlIds = 0;
function guidGenerator() {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + S4());
}
function generateID() {
var TheTextBox = document.getElementById("generateidtxt");
TheTextBox.value = TheTextBox.value + guidGenerator().toString().toUpperCase();
//document.getElementById("generateid").disabled=true;
ttlIds++;
if(ttlIds < 10){
ttlIds_formatted = '000'+ttlIds;
}else if(ttlIds < 100){
ttlIds_formatted = '00'+ttlIds;
}else if(ttlIds < 1000){
ttlIds_formatted = '0'+ttlIds;
}
d = new Date();
var funkydate = d.getFullYear() +'-' + (d.getMonth()+1) + '-' + d.getDate() + '-' + ttlIds_formatted;
document.getElementById("funkydate").value = funkydate;
}
I have a situation where I receive certain events over time that each have a timestamp associated with them. I am putting it into a Jquery accordion section that is labelled by date. It works except that I wish to maintain the accordion sections in sorted descending order, i.e most recent date at the top and events belonging to that date go into that section. Here is the complete code I have so far, currently I just append a new date to the end. How do I insert so that it is sorted?
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
function getRandInt(max) {
return Math.floor(Math.random() * Math.floor(max))
}
function getRandomTime() {
var t = ['AM', 'PM']
var hr = getRandInt(13);
var mn = getRandInt(60);
var sec = getRandInt(60);
var ampm = t[Math.floor(Math.random() * 2)]
return (hr + ':' + mn + ':' + sec + " " + ampm);
}
function getRandomDate() {
var month = getRandInt(13);
var day = getRandInt(28);
return ('2018-' + month + '-' + day);
}
function getRandomEvent() {
var events = ['General Event', 'Random', 'Splash', 'Car crash', 'Touchdown', 'Rain', 'Snow'];
var rand = events[Math.floor(Math.random() * events.length)];
return rand;
}
function getRandomSection(sections) {
var rand = sections[Math.floor(Math.random() * sections.length)];
return rand;
}
function getPopupDivId(t, e, d) {
var popup_div_str = t + e;
var popup_div_id = popup_div_str.replace(/\s{1,}/g, "");
popup_div_id = popup_div_id.replace(/:/g, "");
return popup_div_id;
}
function getDescriptiveDate(dateStr) {
var d_t = dateStr.split("T");
var timeStr = d_t[0] + " " + d_t[1];
console.log(timeStr);
var date = new Date(timeStr + ' UTC');
return "Event time: " + date.toString()
}
function makeTable(eventDetails) {
var d = getDescriptiveDate("2018-11-07T00:49:05");
var popupStr = d + '<br>' + '<table border="1"><tr><th>Parameter Name</th><th>Value</th></tr>';
var data = JSON.parse(eventDetails);
var startTag = '<tr><td>';
var endTag = '</td>';
var rowEnd = '</tr>'
for (var key in data) {
popupStr += (startTag + key + endTag + '<td>' + data[key] + endTag + rowEnd);
}
return popupStr + '</table>';
}
var currentDialog = '';
function setPopupDiv(t, e, d, popup_div_id) {
var table = makeTable('{"Temp": 24, "WindChill": "14", "Dew point": 10}');
var popup_div = '<div id="dialog' + popup_div_id + '\" ' + 'style="display:none">' + table + '</div>';
console.log("setPopupDiv: popup div: " + popup_div);
$('.' + d).append(popup_div);
$('#' + popup_div_id).click(function() {
$(function() {
if (currentDialog == '') {
currentDialog = "#dialog" + popup_div_id;
} else {
console.log('closing dialog' + currentDialog);
$(currentDialog).dialog('close');
currentDialog = "#dialog" + popup_div_id;
}
$("#dialog" + popup_div_id).dialog();
$("#dialog" + popup_div_id).dialog('open');
});
console.log("dialog link click");
return false;
});
}
/* "Create new accordion" button handler */
function addData() {
var d = getRandomDate();
var e = getRandomEvent();
var t = getRandomTime();
var popup_div_id = getPopupDivId(t, e, d);
var ev = '' + t + ' ' + '' + e;
var section = '<h3>' + d + '</h3>';
var dom_element = section + '<div>' + '<ul class=\"' + d + '\">' + '<li>' + ev + '</li></ul>' + '</div>';
$('#accordion').append(dom_element)
.accordion('destroy').accordion({
collapsible: true
});
setPopupDiv(t, e, d, popup_div_id);
console.log("addData(): " + dom_element);
var e2 = getRandomEvent();
var t2 = getRandomTime();
popup_div_id = getPopupDivId(t2, e2, d);
var ev2 = '<li>' + '' + t2 + ' ' + '' + e2 + '</li>';
$('.' + d).append(ev2);
setPopupDiv(t2, e2, d, popup_div_id);
}
function addDataActual(eventDate, eventTime, eventType) {
var popup_div_id = getPopupDivId(eventTime, eventType, eventDate);
var evt = '' + eventTime + ' ' + '' + eventType;
var section = '<h3>' + eventDate + '</h3>';
var dom_element = section + '<div>' + '<ul class=\"' + eventDate + '\">' + '<li>' + evt + '</li></ul>' + '</div>';
var arrayOfClassNames = $("#accordion *").map(function() {
if ($(this).attr('class')) {
if ($(this)[0].nodeName == 'UL') {
if (this.className == eventDate) {
return this.className;
}
}
}
}).get();
if (arrayOfClassNames.length == 0) {
/* New section */
$('#accordion').append(dom_element)
.accordion('destroy').accordion({
collapsible: true
});
setPopupDiv(eventTime, eventType, eventDate, popup_div_id);
console.log(dom_element);
} else {
/* Exists already*/
d = arrayOfClassNames[0];
popup_div_id = getPopupDivId(eventTime, eventType, d);
var eventToAppend = '<li>' + '' + eventTime + ' ' + '' + eventType + '</li>';
$('.' + d).append(eventToAppend);
setPopupDiv(eventTime, eventType, d, popup_div_id);
}
}
function addDataOrNew() {
var arrayOfClassNames = $("#accordion *").map(function() {
if ($(this).attr('class')) {
if ($(this)[0].nodeName == 'UL') {
return this.className;
}
}
}).get();
var toss = getRandInt(2);
if (toss == 0) {
var d = getRandomSection(arrayOfClassNames);
console.log("toss returned 0, adding to existing section " + d);
console.log("Chosen one to add to:" + d);
var e = getRandomEvent();
var t = getRandomTime();
addDataActual(d, t, e);
} else {
var d = getRandomDate();
console.log("toss returned 1, adding a new section " + d);
var e = getRandomEvent();
var t = getRandomTime();
addDataActual(d, t, e);
}
}
function addDataToRandomSection() {
var e = getRandomEvent();
var t = getRandomTime();
var arrayOfClassNames = $("#accordion *").map(function() {
if ($(this).attr('class')) {
if ($(this)[0].nodeName == 'UL') {
return this.className;
}
}
}).get();
console.log(arrayOfClassNames);
d = getRandomSection(arrayOfClassNames);
console.log("Chosen one:" + d);
var e2 = getRandomEvent();
var t2 = getRandomTime();
var popup_div_id = getPopupDivId(t2, e2, d);
var ev2 = '<li>' + '' + t2 + ' ' + '' + e2 + '</li>'
$('.' + d).append(ev2);
setPopupDiv(t2, e2, d, popup_div_id);
}
function addDataToTopSection() {
var e2 = getRandomEvent();
var t2 = getRandomTime();
var arrayOfClassNames = $("#accordion *").map(function() {
if ($(this).attr('class')) {
if ($(this)[0].nodeName == 'UL') {
return this.className;
}
}
}).get();
d = arrayOfClassNames[0];
var popup_div_id = getPopupDivId(t2, e2, d);
setPopupDiv(t2, e2, d, popup_div_id);
var ev2 = '<li>' + '' + t2 + ' ' + '' + e2 + '</li>'
$('.' + d).append(ev2);
}
<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.min.js"></script>
<link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet'>
<!doctype html>
<button onclick="addData()" class="regular">Create new Accordion</button>
<button onclick="addDataToRandomSection()" class="regular">Add data to random section</button>
<button onclick="addDataOrNew()" class="regular">Add new section or append to existing</button>
<fieldset id="patient-event-list">
<legend>Event History</legend>
<div id="eventinfo-body">
<button type="button" id="more" onclick="addDataToTopSection()">More history</button>
</div>
<div id="accordion" class="accordion">
</div>
</fieldset>