Develop Reference

Broken Delivery Estimate Calculator

I'm hoping someone can help me figure out how to code an app that allows you to select a mailing date with jquery datepicker, select Standard or First-class shipping from a dropdown, and calculate an estimated delivery date window (7-12 Days for Standard, 3-5 Days for First-class).
I had it working when the "Mailing in" [number] "Days" accepted a string input but then it broke when I added code for the datepicker.
I also need to keep weekends & holidays excluded from the shipping calculation.
Here's a link to the full pen: https://codepen.io/allyjfuller/pen/oNXvwJL
$('#calculateShippingEstimate').click(function( event ) {
//Prevent button from 'submitting' and reloading the page
event.preventDefault();
//Capture the mailing date
var $mailingDate = $("#mailingDate").val();
var $postageType = $("#postageType").val();
var $shipStateShippingDuration = eval('data.shipTimes.' + $postageType);
var $totalShippingTime = parseInt($mailingDate) + parseInt($shipStateShippingDuration);
//Create the date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate() + parseInt($totalShippingTime);
var year = date.getFullYear();
<form>
<section>
<label>Mailing on</label>
<input id="mailingDate" placeholder="number"></input>
</section>
<section>
<label>Postage:</label>
<select id="postageType">
<option value="Standard">Standard</option>
<option value="FirstClass">First-Class</option>
</select>
</section>
<input class="button" id="calculateShippingEstimate" type="submit" value="Get Estimated Delivery Date"></input>
<div class="results"></div>
</form>

Looking through your code snippet it seems like you're trying to hand roll a lot of features that already exist within the JS Date framework.
Once you get the starting date and the number of days for shipping, you can add those days together to create a final shipping date. From there and within a loop, you may go day by day and check whether the current date index is a weekday or not (using Date.getDay()).
With that you may check for Saturday [6] and Sunday [0] and then add days needed on top of the final date.
I've included my version of the code below with some console debugging but have not added code holidays. Holidays may be checked for using an array or map. Get all the holiday dates for a year and then have the current index check the holiday array/map to see if there are any matches. If there are, add another day to the final date.
The function for addDays is pulled from here. It adds some explanation which I think you'll find helpful.
function addDays(date, days) {
const copy = new Date(Number(date))
copy.setDate(date.getDate() + days)
return copy
}
// FINAL SHIPPING ESTIMATE
$('#calculateShippingEstimate').click(function( event ) {
event.preventDefault();
let mailingDateVal = $("#mailingDate").val();
let shippingDuration = data.shipTimes[$("#postageType").val()];
let mailingDate = new Date(mailingDateVal);
console.log("final Date: " + addDays(mailingDate, shippingDuration));
let finalDate = addDays(mailingDate, shippingDuration)
let mailingDateIndex = new Date(mailingDate);
while(mailingDateIndex <= finalDate) {
console.log("current mailDateIndex: " + mailingDateIndex)
if (mailingDateIndex === finalDate) {
break;
}
// Weekend
console.log(mailingDateIndex.getDay());
if (mailingDateIndex.getDay() == 0 || mailingDateIndex.getDay() == 6) {
console.log("weekend day hit! Adding day to final...")
finalDate = addDays(finalDate, 1);
}
mailingDateIndex = addDays(mailingDateIndex, 1);
}
});

preventing parleyjs multiple steps to continue if a condition is not met

I'm using parsleyjs to validate a form and I'm using the "multiple steps" script found at: http://parsleyjs.org/doc/examples/multisteps.html.
All works great on its own, but I have a set of fields (datetimepicker) that I reset if the end date is less then the start date.
What it does it is simply shows an alert and clears the field when the user clicks "Next".
I thought that with clearing the fields, since they are required the form would not proceed, but it continues to the next page. If I go back and then next again, then it prevents as expected. It's as if the click beats the textbox clearing.
Here is my example in step 2 if you add a start date less then the end date
https://www.blinn.edu/expansion/facilities-listing/form-2-a.HTML
and the code:
// raul - 3-8-2019 - created a javascript to compare dates and pass them to the HTML file. this method had to be done this way becasue the Velocity file was converting the > sign into HTML entities
//var startDate = "03/13/2019 9:39 AM"; //$(".datetimepicker1 input").val();
var startDate = $(".datetimepicker1 input").val();
var start_date = new Date(startDate);
//var endDate = "03/13/2019 9:40 AM"; //$(".datetimepicker2 input").val();
var endDate = $(".datetimepicker2 input").val();
var end_date = new Date(endDate);
//sample1 Fri Mar 08 2019 09:48:16 GMT-0600 (Central Standard Time)
//sample2 Wed Mar 13 2019 09:40:00 GMT-0500 (Central Daylight Time)
return compDate();
function compDate() {
if (end_date >= start_date) {
//$('.form-control, .submit').attr('disabled', 'disabled'); //Disable
//alert(end_date + " is greater than " + start_date);
}
else if (end_date < start_date){
//$('.form-control, .submit').removeAttr('disabled'); //enable
alert(end_date + " is less than " + start_date);
$(".datetimepicker1 input").val(""); // reset the datetimepicker
$(".datetimepicker2 input").val(""); // reset the datetimepicker
e.preventDefault();
return false;
}
else {
$('.form-control, .submit').removeAttr('disabled'); //enable
//alert("no condition met");
}
}
// raul - 3-8-2019 - created a javascript to compare dates and pass them to the HTML file. this method had to be done this way becasue the Velocity file was converting the > sign into HTML entities

UPDATE:
I had to put all of that code in a function before the "multiple step" script and then call it before the previous/next script took place. Not the best solution, but it works for now. Still hope to find a more elegant soulution
$('.form-navigation .previous').click(function() {
/////////////added function here to call it before the "previous" occurred
navigateTo(curIndex() - 1);
});
$('.form-navigation .next').click(function() {
/////////////added function here to call it before the "next" occurred
$('.demo-form').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function() {
navigateTo(curIndex() + 1);
});
});

How to add Days in a islamic or HijriDate?

I have two text boxes.One is for taking StartDate from a islamic calender,so i am using jQuery Calendars Datepicker.
The ExpireDate textbox will automatically 60days from StartDate.so i am writing the logic in Onclose event of datepicker.
$(document).ready(function () {
ShowCalender();
});
function ShowCalender() {
var calendar = $.calendars.instance('islamic');
$('[id$=TxtOrderDate]').calendarsPicker({
calendar: calendar,
onClose: function (dates) {
var expiryDate = new Date(dates);
var x = 60;
expiryDate.setDate(expiryDate.getDate() + x);
document.getElementById('<%=TxtExpirationDate.ClientID%>').value = expiryDate;
},
showTrigger: '<img src="../../../_layouts/15/1033/Saudia/Images/calender.png" alt="Popup" class="trigger img">'
});
}
but here the ExpireDate fill with Date Sun Apr 24 03:00:00 UTC+0300 1436,which is a gregorian date.
expiredate mustbe the islamic Date.
How to add specific number of Days in FromDate?
Please help.

I think you should perform date operations (add date) in Gregorian format and then format back to Islamic date.
keith-wood.name/calendars

How to add dates from the date updated in text box

I am using a form to input date in text box format (mm/dd/yyyy) and the next text box I will enter how many days to add. This is should automatically calulate the no of days and display in 3rd text box. E.g
Text Box1: Input date (mm/dd/yyyy)
Text Box2: Input no of days
Text Box3: textbox1 value+textbox3 value
I need help to add dates.
I tried in onblur event in textbox2 using Javascript function
Code:
//text box2 event
onblur="adddate(this.value)"
//javascript fn
function adddate(a) {
var rdat=document.telstoe.rdate.value;
if(a==2) {
document.telstoe.tdate.value=rdat+2;
}
}
Input Values:
Textbox 1: 11/14/2012 (mm/dd/yyyy)
Textbox 2: 2 or 3 or 4
The output should be: only the days should be counted and displayed and I am getting like 1/14/2012*2*
Please help with the correct code

try this:
function adddate(a) {
var tdate = document.telstoe.rdate.value;
var theDate=new Date(tdate);
theDate.setDate( theDate.getDate() + a );
document.telstoe.tdate.value=(theDate.getMonth() + 1) + "/" + theDate.getDate() + "/" theDate.getFullYear();
}
and use this page for your reference:
http://www.w3schools.com/jsref/jsref_obj_date.asp
Please have a look at the object reference! It would be preferred for your own sake, to learn the javascript Date object. Good luck.

You can use a Date object to parse the date and add days to it:
var date = new Date(document.telstoe.rdate.value);
date.setDate(date.getDate() + 1);
document.telstoe.tdate.value = (date.getMonth() + 1) + "/" + date.getDate() + "/" date.getFullYear().toString().substring(2);
Or use something like the jQuery UI datepicker to format the date.

Javascript checking date

I am trying to use JavaScript to validate that the date selected is not earlier than today, but when I select today's date it's showing the alert box.
JavaScript:
function checkDueDate(sender, args) {
var td = new Date();
td.setMinutes(59);
td.setSeconds(59);
td.setHours(23);
//to move back one day
td.setDate(td.getDate() - 1);
if (sender._selectedDate < td) {
alert("You can't select day from the past! " + td + "");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
ASP.NET:
<asp:TextBox ID="txtDueDate" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="txtDueDate_CalendarExtender" runat="server"
TargetControlID="txtDueDate" OnClientDateSelectionChanged="checkDueDate">
</asp:CalendarExtender>

I think maybe you're complicating things too much. I would just subtract a day in miliseconds and it should work:
function isPast( date ) {
return date.getTime() < (new Date().getTime() - 864e5);
}
Demo: http://jsbin.com/igeyov/1/edit

the logic you have here seems to do exactly what you want - you have set the td variable which you evaluate against to the last possible second of todays date and you are checking if the selected date is before or equal to that. Todays date IS "before or equal to" 23:59:59 today...
Also, you have tagged this with c# , although it is all javascript and ASP.net as far as I can tell.

if you want to do select only future dates then you can try this code also....this is working with ajax calendar:
function checkDate(sender, args) {
if (sender._selectedDate < new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
Here is the HTML code:
<asp:TextBox ID="txtDOB" Width="180px" MaxLength="50" runat="server"></asp:TextBox>
<ajaxctrl:calendarextender onclientdateselectionchanged="checkDate" id="cale_txtDOB"
runat="server" targetcontrolid="txtDOB" format="MM/dd/yyyy" cssclass="cal_Theme1">
</ajaxctrl:calendarextender>
This code works only if you select past dates it will show a pop up " that you can not select past dates" whatever be it.
UPDATED CODE:
Here is code work if you dont want to include today's date also, you just want future dates only:
function checkDate(sender, args) {
if (sender._selectedDate <= new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
//sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
hope this will help you..