We Keep Coding

How to keep the values when after searching datetime?

I have code: I want click button search from to date and the result value back datetime today. I need to keep the value date time.
<input type="date" name="start" />
<input type="date" name="end" />
#section Scripts{
<script>
$(function(){
document.getElementsByName('start')[0].valueAsDate = new Date();
document.getElementsByName('end')[0].valueAsDate = new Date();
})
</script>
}
Result i have :
enter image description here
I want keep value when click search:
enter image description here

If your form is a POST, you could do:
<input type="date" name="start" value="#(Context.Request.Method == "POST" ? Context.Request.Form["start"] : "") />
<input type="date" name="end" value="#(Context.Request.Method == "POST" ? Context.Request.Form["end"] : "") />
If it's a GET form, you could do:
<input type="date" name="start" value="#(Context.Request.Query["start"]) />
<input type="date" name="end" value="#(Context.Request.Query["end"]) />

Increase the date and assign as a max in date field

I'm using javascript to get the value of form input field with getElementById("myTextInputID")
How can I increase the date by 21 days (3 weeks) and assign this new date as a max in the date field with name end_date ?
What I have tried with new Date() and addDays(21) is not working for me.
<form action ="form_page.php" method="post">
<div id="standardPanel">*Task / Person: <input type="text" name="product" required ></div>
<div id="standardPanel">*Description: <input type="text" name="customer" required ></div>
<div id="standardPanel">*Date: <input id="myTextInputID" type="date" name="manufacture_one" required ></div>
<p class="flip" onclick="showEndDate()">Click to add End Date</p>
<div id="panel">
End Date: (holidays only) <input type="date" name="end_date">
</div>
<div><input id="submit" name="action" type="submit" value="submit"/></div>
</form>
<script>
function showEndDate() {
var inputValue = document.getElementById("myTextInputID").value;
if(inputValue != "") {
document.getElementById("panel").style.display = "block";
} else {
alert("Date cannot be blank");
}
var inputValue = new Date(document.getElementById("myTextInputID").value);
inputValue.addDays(21);
document.getElementsByName('end_date')[0].setAttribute("max", inputValue);
}
</script>```

The addDays method doesn't exist. You need to use the setDate() method.
let dateInput = document.getElementById("dateInput");
dateInput.addEventListener("change", () => {
console.log("eventWorking");
var inputValue = dateInput.value;
var inputDate = new Date(inputValue);
console.log(inputDate);
// Adding 21 days using setDate
inputDate.setDate(inputDate.getDate() + 21);
console.log(inputDate);
})
Date: <input id="dateInput" type="date" name="manufacture_one" required >
In summary you can just replace the line inputValue.addDays(21); with inputValue.setDate(inputValue.getDate() + 21);
But avoid using the same var name two times in the same method ! As it will be bring you problems and it is easy to find two differents name

You use the setDate method to add the desired amount of days to an existing date object and, for simplicity in outputting to the end_date field rather than simply use value you can use valueAsDate as below.
Incidentally ID attributes MUST be unique and in most cases are not really required as identification of DOM elements can be done in other ways such as querySelector. Also perhaps worth noting is that the use of inline event handlers is not considered best practise nowadays - externally registered event handlers are much cleaner '-)
document.querySelector('p.flip').addEventListener('click',function(e){
let manufacture_date=this.parentNode.querySelector('[name="manufacture_one"]');
let end_date=this.parentNode.querySelector('[name="end_date"]');
if( manufacture_date.value=='' ){
alert('Date cannot be blank');
return false;
}
let mdate=new Date( manufacture_date.value );
let ndate=new Date( mdate.setDate( mdate.getDate() + 21 ) );
end_date.valueAsDate=ndate;
});
<form action="form_page.php" method="post">
<div>*Task / Person: <input type="text" name="product" required /></div>
<div>*Description: <input type="text" name="customer" required /></div>
<div>*Date: <input type="date" name="manufacture_one" required /></div>
<p class="flip">Click to add End Date</p>
<div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div>
<input type="submit" />
</form>
Or, an alternative that uses a change event listener bound to the manufacture_one date input field so that the user does not need to click the "click here to..." link to calculate the new date.
document.querySelector('[name="manufacture_one"]').addEventListener('change',function(e){
if( this.value=='' ){
alert('Date cannot be blank');
return false;
}
let mdate=new Date( this.value );
document.forms.dates.end_date.valueAsDate=new Date( mdate.setDate( mdate.getDate() + 21 ) );
});
<form name='dates' action="form_page.php" method="post">
<div>*Task / Person: <input type="text" name="product" required /></div>
<div>*Description: <input type="text" name="customer" required /></div>
<div>*Date: <input type="date" name="manufacture_one" required /></div>
<div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div>
<input type="submit" />
</form>

Input type="text" currency validation

I currently have an input type="text" that I transform into a currency value on the "keyup" event. In order to keep this functionality (works fine), the input type has to be set to "text". At the same time, I would like to have a minimum value of "100.00" set to it.
Any way I can accomplish this? Also, would I able to customize my jquery validation message to say "Minimum Amount $100.00"?
$('input.number').keyup(function(event) {
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/([0-9])([0-9]{2})$/, '$1.$2')
.replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required id="balance" name="balance" type="text" class="number" />

You can add this property in your input filed: minlength="5"
<input required id="balance" name="balance" type="text" class="number" minlength="5" />
And in your JS code you can add a 'if' statement to check that this input contain at least 5 char.
Furthermore you can add the same 'if' statement in your back-end to check it again.

Thank you all for your input.
I've ended up keeping the input type="text" for the number of digits users can type in and called a function to check the input value against the 100.
function checkAmount() {
var valueBalance = $("#balance").val();
var valueNumberBalance = parseFloat((valueBalance).replace(/[^\d\.]/, ''));
if (valueNumberBalance < 100) {
$("#balance").get(0).setCustomValidity("Minimum Amount of $100.00");
}
else {
$("#balance").get(0).setCustomValidity("");
}
}

A snippet created using the type="number" instead of type="text" on the input still allows the jQuery functionality to work.
The validation message is HTML5 and not jQuery as you did not provide that code. I did the following:
Changed to type="number"
Added min="100"
Added step="0.01" to handle currency stepping
$('input.number').keyup(function(event) {
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/([0-9])([0-9]{2})$/, '$1.$2')
.replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Text input (original): <input required id="balance" name="balance" class="number" type="text" /><br />
Number input: <input required id="balance" name="balance" class="number" type="number" min="100" max="99999" step="0.01" /><br />
<input type="submit" />
<small>Enter less than 100 and press 'submit' to see validations.</small>
</form>

you can try to currency validation using regex
<div class="col-sm-3 form-group">
<b>Premium :*</b><br>
<p><input type="text" class="form-control" oninput="this.className = ''" name="premium" id="premium" valideAtt="currency" title="Premium" onblur="defaultValidation(this)"></p>
<span id="er_premium" style="display: block; width:100%; float: left;"></span>
</div>
<script type="text/javascript">
var REG_CURRENCY = /(?=.*\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|0)?(\.\d{1,2})?$/;
function defaultValidation(src){
var getAttributeValue=src.attributes.valideAtt.value;
if(getAttributeValue=="currency"){
if(!src.value.match(REG_CURRENCY)){
$("#"+src.id).addClass("invalid");
$("#er_"+src.id).html("<span style=\"color:red\">Please Enter Valide currency Value.<\span>");
return false;
}else{
$("#er_"+src.id).html("");
return true;
}
}
}
<script>

How to check datetime-local input field is not less than other datetime-local field

I am creating a form, where i am using datetime-local for 2 input fields - StartDate and EndDate.
How can I ensure EndDate is not less than StartDate. I wrote below JS, but it is not working on selecting date / or even onclick on submit button of the page.
Please advise, and thanks for taking your time to read through this :)
function checkDate() {
var dateString = document.getElementById('StartDate').value;
var dateString2 = document.getElementById('EndDate').value;
var DateStart = new Date(dateString);
var DateEnd = new Date(dateString2);
if (DateEnd > DateStart) {
alert("End date cannot be less than Start date.");
return false;
}
return true;
}
<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onclick="checkDate()" />
</div>
<div class="col-lg-1 mb-0">
<h6>Deployment End *</h6>
</div>
<div class="col-lg-3 mb-0">
<input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onclick="checkDate()" />
</div>

Using the click event handler will only activate when you click on the form, firing when you do not have any of the useful information. The alternative would be 'onchange' which will fire when you complete the input.
<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onchange="checkDate()" />
<input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onchange="checkDate()" />
If you want to make sure your end date is in the future compared to your start date you need to swap the comparison operator.
if (DateEnd < DateStart) {
alert("End date cannot be less than Start date.");
return false;
}
return true;

Second date greater than first date in javascript

I have 2 date inputs i would like the min of checkout to be set to the value of checkin.
Check In
<input type="date" id="checkIn" name="checkIn">
Check out
<input type="date" id="checkOut" min="" name="checkOut">
The idea is to have the check out date to be greater than the check in date after the user enters the first date.
I have tried using a something like this (works on numbers but not dates)
function updatedate() {
var firstdate = document.getElementById("checkIn").value;
document.getElementById("checkOut").min = firstdate;
}
Using onclick for the input.
Any suggestions would be great thank you.

Try this
<label>Check In</label>
<input type="date" id="checkIn" name="checkIn" onchange="updatedate();">
<label>Check out</label>
<input type="date" id="checkOut" min="" name="checkOut">
-
function updatedate() {
var firstdate = document.getElementById("checkIn").value;
document.getElementById("checkOut").value = "";
document.getElementById("checkOut").setAttribute("min",firstdate);
}

Your code works for setting the minimum. Use the 1st input change event to update the 2nd input minimum, instead of click:
var checkIn = document.getElementById('checkIn');
var checkOut = document.getElementById('checkOut');
checkIn.addEventListener('change', updatedate);
function updatedate() {
var firstdate = checkIn.value;
checkOut.min = firstdate;
}
#checkOut:invalid {
color: red;
}
<div>When the checkOut is less than the checkIn, the checkout color will change to red</div>
<label>Check in</lable>
<input type="date" id="checkIn" name="checkIn">
<label>Check out</lable>
<input type="date" id="checkOut" min="" name="checkOut">