We Keep Coding

Is there something wrong with the way I am extracting the current date and time in html?

I have the following script:
$('input[name=flexRadioDefault]:radio').click(function () {
let datecreated = new Date();
let servicetime = new Date();
if($('#flexRadioDefault2').is(':checked')) {
datecreated = datecreated.getFullYear()+'-'+(datecreated.getMonth()+1)+'-'+datecreated.getDate()
servicetime = servicetime.getHours() + ':' + servicetime.getMinutes();
console.log(datecreated);
console.log(servicetime);
console.log("checked");
$('#servicedate').val(datecreated);
$('#servicedate').prop('disabled',true);
$('#servicetime').val(servicetime);
$('#servicetime').prop('disabled',true);
console.log($('#servicedate').val());
}
else {
$('#servicedate').val('');
$('#servicetime').val('');
$('#servicetime').prop('disabled',false);
$('#servicedate').prop('disabled',false);
}
})
HTML:
<h5>Service Period:</h5>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
<label class="form-check-label" for="flexRadioDefault1">
Scheduled
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
<label class="form-check-label" for="flexRadioDefault2">
Immediate
</label>
<br>
</div>
<div class="servicedate col-md-6">
<div class="form-group">
<label for="start">Service date:<span class="text-danger">*</span></label>
<input type="date" id="servicedate" name="servicedate" placeholder = "mm/dd/yyyy" required>
</div>
<div class = "form-group">
<label for="start">Service time:<span class="text-danger">*</span></label>
<input type="time" id="servicetime" name="servicetime" required>
</div>
</div>
Here is how the thing look like:
So if user select Scheduled, the date and time must be manually selected. If Immediate , the script will extract the current date and time and put it in the input box of servicetime and servicedate.
But the problem is the code is not stable. I am unsure why but sometime when I clicked Immediate, only the current time is shown in servicetime. The date does not show. Sometime both the current time and date is no where to be found in the input box. While it does not show in the input box, the console is still printing the current time and date. Can anyone explain to me what am I doing wrong and point out how can I fixed this? Thank you !

Your formated date is not acceptable for the html element <input type="date">
You have to change the format of date and after doing this, pass the formated value to the input value,
Add this script in your function for change the format of date
var date = new Date(datecreated),
mnth = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2);
var newDate = [date.getFullYear(), mnth, day].join("-");

Validating date, time start and time end with javascript

I've tried many ways to validate the date and time with Javascript functions but none seem to work. I'd like to alert users when their date input is of a past date whereas the time start cannot be the same as time end and it cannot be later than time end.
My HTML codes:
<p>
<label> Date:
<input type="date" id="date" name="date" required />
</label>
</p>
<p>
<label> Time start:
<input type="time" id="timeStart" name="timeStart" required />
</label>
</p>
<p>
<label> Time end:
<input type="time" id="timeEnd" name="timeEnd" required />
</label>
</p>

could be you should convert you value in a proper date
eg:
var d = new Date("03/25/2015");
var n = d.getMonth();

As you can only store strings in localstorage so when you tried to
parse the JSON to get d, it turned to be a string. So you need to
convert it into Date Object before doing any operations on it as
mentioned by scaisEdge
var date = new Date(d);
var monthname = month[date.getMonth()];
Refer https://jsfiddle.net/Ltufu0aj/

How to validate datepicker date in javascript?

Good Day!
I'm currently working on validating 2 datepicker which are
Date Received and Date Delivered
My issue is when i choose today's date 12/29/2015 in Date Received and if i choose 1/1/2016 in Date Delivered my validation should accept the 2 dates but it's not working. I thinks it only reading the 12/29 and 1/1 not the year.
Here's my code
var datepicker = document.getElementById('datepicker').value;
var datepicker1 = document.getElementById('datepicker1').value;
if (datepicker1 <= datepicker && datepicker1 != "" )
{
alert("Invalid Date Combination!");
document.getElementById('datepicker').value = "";
document.getElementById('datepicker1').value = "";
}
datepicker1 = Date Delivered
datepicker = Date Received
HTML
<div style="float:right; " >
Date Received <input type="text" id="datepicker" onchange="getDate()" style="width: 135px;" name="sewdatereceived" required />
Date Delivered <input type="text" id="datepicker1" onchange="getDate()" style="width: 135px;" name="sewdatedelivered" required />
</div>

Changing a checkbox label in Javascript

I'm trying to change a checkbox label in Javascript. The site is Wordpress and the form is a plug in, so I have to use a snippet plug in to target the checkboxes.
In brief, when a session is full, the checkbox needs to be greyed out and the label text highlighted in red.
Here's the code I'm using:
var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
mon1.style.color = "red";
<div>
<input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /> 5.00-6.00pm: 4-6 year olds FULL<br>
<input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br>
<input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL
</div>
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div>
The greying of the box isn't a problem, but I can't change the font colour of the label. Does anyone know what the issue might be?

The only way you can do this is to change your markup as the text isn't part of the checkbox. All you need to do is add labels around the checkboxes and their respective texts, and traverse to the correct label with JS.
Your checkboxes should have <label>s anyway, so that when the text is clicked it triggers its checkbox.
You can target the label using parentNode
var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
mon1.parentNode.style.color = "red";
<label>
<input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" />
5.00-6.00pm: 4-6 year olds FULL
</label>
<br />
<label>
<input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" />
6.00-7.00pm: 7-9 year olds
</label>
<br />
<label>
<input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" />
7.00-8.00pm: 10-14 year olds FULL
</label>
<br />
N.B. If you intend to trigger on the checkbox change, use change/onChange not click/onClick.

This is because the Style was only for the INPUT.
I have added a label to the text for the moment.
HTML
<div>
<input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /><label id="Mondays_7_1_1-text">5.00-6.00pm: 4-6 year olds FULL</label><br>
<input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br>
<input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL
</div>
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div>
JS
var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
var mon1Text = document.getElementById('Mondays_7_1_1-text');
mon1Text.style.color = "red";
JSFiddle

Wrap your text around a <span> for example, because it is not a part of the input.
<div><input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" />
<span name="Mondays_7_1_1">5.00-6.00pm: 4-6 year olds FULL</span>
...
<script>
var monSpan = document.getElementsByName('Mondays_7_1_1')[0];
monSpan.style.color = "red";</script>

I'm unaware that I have any access to the guts of the shortcodes.
Your only workaround then afaik is DOM manipulation. Something in the taste of :
var disableFunc = function (id, index) {
var childNodes = document.getElementById(id).parentNode.childNodes;
var texts = Array();
var textIndices = Array();
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType == 3 && childNodes[i].nodeValue.trim() != "") {
texts.push(childNodes[i].nodeValue);
textIndices.push(i);
}
}
var mon1 = document.getElementById(id);
mon1.disabled = true;
var span = document.createElement('span');
span.innerHTML = texts[index - 1];
span.style.color = 'red';
mon1.parentNode.removeChild(childNodes[textIndices[index - 1]]);
mon1.parentNode.insertBefore(span, childNodes[textIndices[index - 1]]);
}
disableFunc('Mondays_7_1_1', 1);
//disableFunc('Mondays_7_1_2', 2); //!\ doesn't work !
//disableFunc('Mondays_7_1_3', 3); //!\ doesn't work !
This will work for 1 disable, because the function doesn't take into account the new modified DOM ;) http://jsfiddle.net/sskqtL9x/4/
I suggest you prepare your DOM (to match the replace pattern) by wrapping your labels inside spans or labels and then run this func after some tweaking is done to it.

Dynamically Update fields through Input field and dropdown

I'm trying to dynamically update a text field through an input field. This will then be linked to a dropdown selection with values. I also need to show a due date to show 30 days in advance from today's date.
Here is my HTML:
<div>
<label for="payment">Payment:</label>
<input type="text" name="amount" id="amount" onChange="myfunction()"/>
<br /><br />
<label for="delivery">Delivery:</label>
<select id="delivery" name="delivery">
<option value="1">Fast</option>
<option value="2">Medium</option>
<option value="3">Slow</option>
</select>
</div>
<br />
<div>
Payment Breakdown: <br /><br />
Payment:
<div name="amount" id="amount"></div>
Freight:
<div name="delivery" id="delivery"></div>
Total Payment:
<div name="total" id="total"></div>
Due Date:
<div name="date" id="date"></div>
</div>
I'm struggling with the Javascript part though and fitting it all together.
I've gotten as far as this and now I'm stuck. (Not very far I know)
function myFunction()
{
var amount = document.getElementById("amount");
var delivery = parseInt($(this).find("option:selected").val());
total = amount + delivery
$("#total").html(total);
};
I've looked at examples on Stackoverflow and Google but nothing seems similar to what I'm trying to achieve. Although I know the answer is out there, I'm not sure if I'm asking the right question.
Cheers

I would change it to this. Here I have an updateCost() function which is called when the amount is changed or the delivery is changed. I also added code to handle the due date.
Remove the inline onchange event from the amount:
<input type="text" name="amount" id="amount"/>
Javascript:
function updateCost()
{
var amount = $('#amount').val();
var delivery = parseInt($('#delivery').val());
var total = amount + delivery
$("#total").html(total);
$("#amountdiv").html(amount);
$("#deliverydiv").html(delivery);
// handle the due date
var todayPlus30 = new Date();
todayPlus30.setDate(todayPlus30.getDate()+30);
var dateStr = todayPlus30.getDate() + "/" + (todayPlus30.getMonth()+1) + "/" + todayPlus30.getFullYear();
$('#date').html(dateStr);
}
$(document).ready(function(){
$('#amount').change(function(){ updateCost(); });
$('#delivery').change(function(){ updateCost(); });
});
Your original code has a few problems:
The wrong case on the inline function call
The use of this within the function when this is not actually any of your elements (you didn't pass it as an argument).
The use of amount in the calculation when amount is an input element, not a value.
From a usability point of view, it would only try to update when the amount is changed, I think it would be better to update on both change of the amount and delivery.