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);
}
});

How to have javascript presets today's date in HTML form

I am developing a project with Django.
I have an html webpage containing a form which has a date field.
I want javascript compile it with today's date as soon as my user lands on that webpage, so that he/she gets a kind of "default date".
I have in my html page (templates/aggiungi_terminologia.html), the date field:
<div class="form-group">
<label for="glossary_entry_input_21">Data di inserimento della terminologia</label>
<small id="inputHelp" class="form-text text-muted">Compilare solo se è nota la data di pubblicazione del documento fonte, altrimenti inserire la data di oggi.</small>
<input name="Data_inserimento_entry" type="date" value="01/01/1900" class="form-control" id="date_to_turn_into_today" placeholder="">
</div>
and then the javascript call at the end of the form:
{% load static %}
<script> src="{% static 'get_today_date.js' %}"</script>
And then, inside my javascript function (static/js/get_today_date.js):
var today = moment().format('DD/MM/YYYY');
document.getElementById("date_to_turn_into_today").value = today;
and since I am using moment.js, I added 'moment' in settings.py> INSTALLED_APPS ,
and to install moment I run on my console:
pip install django-staticfiles-moment
But when I run the server, all I get on that field is this:
My console is returning:
WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry:
(fields.W161) Fixed default value provided.
HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to
have the current date as default, use django.utils.timezone.now
Why javascript is not replacing the date?
How can I make it work?
NOTE: the problem lies in the connection between js, html and django

Continue from comment about duplicated or not, take a look:
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById('inputDate').value = today;
<input type="date" id="inputDate" />
Please check this also.

I've seen similar behavior (where the input field shows a date placeholder instead of my desired date) when I provided a date string that was incorrectly formatted. The input element seems to need a format like yyyy-mm-dd.
Here's a pretty intuitive solution using vanilla JS. The default value of the input element will be the (locale-specific) date.
(And most of the further info you might want about JS Dates can be found here on MDN.)
const
// Selects input element
dateInput = document.getElementById("date"),
// Defines Date object
date = new Date(),
// Extracts component parts of Date object
year = date.getFullYear(),
month = date.getMonth(),
day = date.getDate(),
// Defines a function to add a leading zero if needed
pad = part => part < 10 ? "0" + part : part,
// Formats date to meet the `input` element's expectations -- like: `yyyy-mm-dd`
// (Adds +1 to month b/c `getMonth()` uses a zero-based array)
dateString = year + "-" + pad(month + 1) + "-" + pad(day);
// Inserts date string into input element
dateInput.defaultValue = dateString;
// Repeats this process for the "time" parts
/*
const
timeInput = document.getElementById("time"),
hours = date.getHours(),
minutes = date.getMinutes(),
seconds = date.getSeconds(),
timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
timeInput.defaultValue = timeString;
*/
<input id="date" type="date" />
<!--
// Optional input for time
<input id="time" type="time" />
-->

SOLVED
Here is what I did.
In a javascript file called
get_today_date.js
stored at path
static/js/get_today_date.js
I inserted
function get_today_date() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById('date_to_turn_into_today').value = today;
}
as suggested here https://stackoverflow.com/a/57953522/7658051 .
Then in the HTML page, before the closing </body> tag, I inserted
{% load static %}
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date() </script>
and it works perfectly.
There was no neet to install the module moment, and even if my console returns
WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry: (fields.W161) Fixed default value provided. HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to have the current date as default, use django.utils.timezone.now
my app works fine.

The previous code did not work just because I forgot to call the function in HTML, so I just had to add
get_today_date()
But in the end I am not sure if I correctly installed the moment module required for the previuos javascript script.

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);
});
});

Date Picker Input

How can I validate my HTML date input so only certain dates of the week can be selected? I've seen this before on some booking websites. A date-picker calendar appears and days that the event is unavailable are grey out and cannot be selected.
I'm not sure where to start and I want to do this as my current project requires date input validation. The event is only available 3 days a week so it wouldn't make sense for the client to select a date when there is no event on.
Example, days are Monday, Wednesday and Friday so picking the Thursday 30th Nov shouldn't be an option.
With the first-line question in mind, what would be the simplest programming language to create a date-picker on to go with a data driven website?

If you are using jquery date picker:
<script>
var disableDates = ["22-11-2017", "23-11-2017"];
function disable(date) {
// convert it to my formate
dateToCheck = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dateToCheck , disableDates) == -1) {
return [true, ""];
} else {
return [false, "", "disabled"];
}
}
$(function() {
$("#eventDate").datepicker({
dateFormat: 'dd-MM-yy',
beforeShowDay: disable
});
});
</script>

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