I'm new in javascript.
I have week-picker from this link week-picker, but i dont know how i can put that date range for two text input??
start date - end date.
ex. <input type="text" name='start_date' id="start_date"/> TO <input type="text" name="end_date" id="end_date"/>
Why not just do this:
<input type="text" name='start_date' id="start_date" data-weekpicker="weekpicker" />
<input type="text" name="end_date" id="end_date" data-weekpicker="weekpicker" />
You could try to just split the value from the week-picker input:
var range = document.getElementById("weekPickerInput").value;
var dates = range.split("-"); //Based on what divider you configured for the week picker
document.getElementById("startDateInput").value = dates[0];
document.getElementById("endDateInput").value = dates[1];
Related
I want to display the amount in the textbox based on the date selected.For weekdays amount is 200 on sundays amount is 500. How can I do it in jquery? Whether it is possible to do?
How can I do it in jquery?
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />
Use getDay. Add a event listener to to input change then each time the input changes create a new Date and then use the getDay function that returns the day number (0 for Sunday).
Then you can put a conditional statement to change the form-control selector.
$(function() {
$("#txtDate").change(function() {
var selDate = new Date(this.value);
if (selDate.getDay() == 0) { //If sunday, can change your logic here
$(".form-control").val(5000);
} else {
$(".form-control").val(2000);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />
A simple version
$(function() {
$("#txtDate").change(function() {
var dow = new Date(this.value).getDay();
$(".form-control").val(dow === 1 || dow ===6 ? 2000 : 5000);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />
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;
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">
I have a form with four number inputs: hourly wage, hours worked, number of weeks, and salary.
I want to automatically fill-in the salary box based on the inputs from wage, hours, and weeks boxes.
So in theory, if hourly wage = 15, hours worked = 40, and number of weeks = 52 then the salary form box should automatically be set to "31200"
Any simple way to do this with javascript? I have tried a few different methods and can't seem to get it to work.
If it helps, I have already set all the form boxes to variables:
var wageBox = document.forms[0].wage;
var hoursBox = document.forms[0].hours;
var weeksBox = document.forms[0].weeks;
var salaryBox = document.forms[0].salary;
Edit: sorry, here's the HTML form code:
<fieldset id="incomeinfo">
<label for="wage">
Hourly wage:
<input type="number" id="wage" name="wage" placeholder="e.g. 15.00">
</label>
<label for="Hours">
Hours worked each week:
<input type="number" id="hours" name="hours" value="40" placeholder="e.g. 40">
</label>
<label for="Weeks">
Number of weeks a year:
<input type="number" id="weeks" name="weeks" value="52" placeholder="e.g. 52">
</label>
<br />
<br />
<label for="salary">
Salary:
<input type="number" id="salary" name="salary" placeholder="e.g. 31200" required>
</label>
</fieldset>
You can add a event for when the inputs change and calculate the salary based off of their values. Quick mock up.
Fiddle: http://jsfiddle.net/AtheistP3ace/6uatoyd2/
JS:
function calculateSalary () {
// Get all values we need to calculate
var wage = parseInt(document.getElementById('wage').value, 10);
var hours = parseInt(document.getElementById('hours').value, 10);
var weeks = parseInt(document.getElementById('weeks').value, 10);
// Calculate salary
var salary = wage * hours * weeks;
// Only update salary if we got number
if (!isNaN(salary)) {
document.getElementById('salary').value = salary;
}
}
// Get all inputs, loop and attach change event with calculateSalary handler
var inputs = document.getElementsByTagName('input');
var index = 0, length = inputs.length
for ( ; index < length; index++) {
inputs[index].addEventListener('change', calculateSalary);
}
HTML:
<input type="text" id="wage" placeholder="wage" />
<input type="text" id="hours" placeholder="hours" />
<input type="text" id="weeks" placeholder="weeks" />
<input type="text" id="salary" placeholder="salary" />
EDIT: Updated fiddle using your HTML. Same code works.
http://jsfiddle.net/AtheistP3ace/6uatoyd2/1/
<html>
<body>
<input type="date" class="form-control" name="date" value="" id="departuredate"/>
<input type="date" class="form-control" name="date_arrival" id="arrivaldate" value="" />
</body>
</html>
This is a code for giving date. I want to validate calender as departure and destination date. destination date should not be less than departure date
Include jquery before this code and call the below code on form submit:
<script>
var startDate = new Date($('#departuredate').val());
var endDate = new Date($('#arrivaldate').val());
if (startDate < endDate){
alert("date shoul be geater");
}
</script>