Second date greater than first date in javascript - 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">

Related

Display text / Number in the Input based on selected days and weekends

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" />

Limit numbers entered in input field

I got this working however, it need to limit the parts of the text input. For instance, I have to limit DD to allow upto 31, MM to limit upto 12 and limit YYYY from 1900 to 2018
Any idea how to go about this?
$('[data-type="dateofbirth"]').mask('00/00/0000');
function submitBday1() {
var Q4A = "";
var Bdate = document.getElementById('bday1').value;
var darr = Bdate.split('/');
var temp = darr[0];
darr[0] = darr[1];
darr[1] = temp;
var fmtstr = darr.join('/');
var Bday = +new Date(fmtstr);
Q4A += ~~((Date.now() - Bday) / (31557600000));
var theBday = document.getElementById('resultBday1');
theBday.innerHTML = Q4A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="dateofbirth" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">
The jquery.mask.min.js library
is not meant to be a validation library, just a way to automatically insert characters like punctuation. Validation would have to be done separately.
Hence, I would suggest to use Inputmask:
$('[data-type="dateofbirth"]').inputmask({alias: 'datetime', inputFormat: 'dd/mm/yyyy'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>
<input type="text" data-type="dateofbirth" maxLength="10" class="form-control" placeholder="dd/mm/yyyy">
You have a couple of options:
Use <select>:
<select>
<option>1</option>
<option>2</option>
<option>...</option>
<option>31</option>
</select>
Use <input type="number" min="1" max="31">:
<label>Day
<input type="number" min="1" max="31" step="1" value="1" />
</label>
<label>Month
<input type="number" min="1" max="12" step="1" value="1" />
</label>
<label>Year
<input type="number" min="1900" max="2018" step="1" value="2018" />
</label>
Note: not all browsers support number as an input type, so please make sure it'll work on the platforms that you need it to work on.
You want to validate your inputs beyond what hmlt5 can do, so a plugin like jQuery Validate would be a good idea.
You may have to research basic usage first, but it is fairly straightforward and very useful.
First, to validate your birth date, moment.js will make it easy:
moment(document.getElementById('bday1').value, 'DDMMYYY').isValid()
moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= 2018 or better
moment(document.getElementById('bday1').value, 'DDMMYYY').year() <= moment().year()
To tie this into jQuery validate, you can add the below as a custom method of jQuery Validate and set a rule for your "date" input validBirthDate : true
$.validator.addMethod('validBirthDate', function(value){
return moment(value, 'DDMMYYY').isValid() && moment(value, 'DDMMYYY').year() <= moment().year();
})
Try this...
$('[data-type="dateofbirth"]').mask({
alias: 'datetime',
inputFormat: 'dd/mm/yyyy',
min: '31/12/1900',
max: '31/12/2018'
});

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;

Why is my AngularJS ngModel binding to the time inputs, but not binding to the date inputs?

I'm trying to bind an input of type date to a model. I'm able to bind to time fields, but I'm having trouble with date fields. The HTML:
<div ng-app ng-controller="HistoryCtrl">
<input type="date" nm-model="startDate" />
<input type="time" ng-model="startTime" />
<input type="date" nm-model="endDate" />
<input type="time" ng-model="endTime" />
<button ng-click="updateForm()">Update</button>
</div>
This is my controller (simplified):
function HistoryCtrl($scope) {
$scope.result = {
result: 'success',
start: '2013-11-23 03:00:00',
end: '2013-11-24 16:30:00',
delta: 0.05681799352169
};
$scope.updateForm = function () {
$scope.updateTimespan($scope.result.start, $scope.result.end);
};
$scope.updateTimespan = function (start, end) {
$scope.startDate = start.split(" ")[0];
$scope.startTime = start.split(" ")[1];
$scope.endDate = end.split(" ")[0];
$scope.endTime = end.split(" ")[1];
}
}
Here's a fiddle: http://jsfiddle.net/t3m6r/2/
I'm using Google Chrome 31.0.1650.57 for Mac. When I click the "Update" button, the time fields update but the date fields do not. Why? Am I doing it wrong?
You are using ng-model but type wrongs, "nm-model".
<input type="date" ng-model="startDate" />
<input type="time" ng-model="startTime" />
<input type="date" ng-model="endDate" />
<input type="time" ng-model="endTime" />
See JS Fiddle

how put date range from week picker for two text input?

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];

Categories