How to validate datepicker date in javascript? - 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>

Related

I have tried to disabled past dates , now i want my "date_to" field dates greater than "date_from" field date

I want my departure date not greater than arrival date, like if i have selected 4 Aug on arrival, disable departure date less than that.
$(function(){
//arrival date
date_from.min = new Date().toISOString().split("T")[0];
//departure date
date_to.min = new Date().toISOString().split("T")[0];
})
<input type="date" class="tour-search-input" name="arrival" id="date_from" placeholder="DD/MM/YY">
<input type="date" class="tour-search-input" name="departure" id="date_to" placeholder="DD/MM/YY">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Validate input date in Javascript

I have the following code:
<div class="col-xs-2">
<div class="form-group">
<label>Fecha del evento</label>
<input type="date" class="form-control input-sm" id="txtfec" name="txtfec" value="<?php echo date('Y-m-d'); ?>"/>
</div>
</div>
I want to validate it so that I can only enter any dates 20 days after the current date for example.
date today Date save
2016/11/29 2016/12/19
Assuming date format would be yyyy/mm/dd
Add +20 to system date and convert the date to time(t1)
Convert user input(i.e date) to time(t2)
if t2 > t1 then input is greater than 20 days else its not
I think date picker plugins may solve your problem
https://eonasdan.github.io/bootstrap-datetimepicker/

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/

AngularJs DatePicker - calendar dropdown doesn't react to model change

I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?
HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});

Changing Date with Radio Buttons in Javascript

So I've gotten my code to display the correct current date in the 1st text box, but then when I choose one of the radio buttons to choose my "Pick-Up" date, the 2nd text box does not display the date. Basically, 1st box should show current date, 2nd box should show the date chosen from the radio buttons (imagine dropping off film that needs developed and you are choosing whether you want it 1 day, 2 days, or 3 days processing). I am including my full code so you can see what I'm doing. Can someone please show me what I'm doing wrong...
<script type="text/javascript">
function my_curr_date() {
var currentDate = new Date()
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var my_date = month+"-"+day+"-"+year;
document.getElementById("dateField").value=my_date;
}
function orderReady(orderTime){
dateToday.setDate(dateToday.getDate()+orderTime);
var ready=dateToday.getMonth()+"/"
+dateToday.getDate()+"/"+dateToday.getFullYear();
document.getElementById("duedateField").value=ready;
}
<p>Item<br />
<input type="radio" name="item" value="print_5x7" onclick="orderReady(1)" />5x7 Prints(1 day)
<input type="radio" name="item" value="poster" onclick="orderReady(1)" />Poster (1 day)
<input type="radio" name="item" value="mug" onclick="orderReady(2)" />Coffee Mug (2 days)
<input type="radio" name="item" value="shirt" onclick="orderReady(3)" />T-shirt (3 days)</p>
<p>Today's Date<br />
<input type='text' name='dateField' id='dateField' value='' /><br />
Pick-up Date<br />
<input type='text' name='duedateField' id='duedateField' value='' /></p>
You did not set the duedateField value to the result you have calculated
i think this
function orderReady(orderTime){
dateToday.setDate(dateToday.getDate()+orderTime);
var ready=dateToday.getMonth()+"/"
+dateToday.getDate()+"/"+dateToday.getFullYear();
document.getElementById("duedateField").value=due_date;
}
should be
function orderReady(orderTime){
dateToday.setDate(dateToday.getDate()+orderTime);
var ready=dateToday.getMonth()+"/"
+dateToday.getDate()+"/"+dateToday.getFullYear();
document.getElementById("duedateField").value=ready;
}
you have to set ready for the duedateField value
it is so simple dude
function orderReady(orderTime){
dateToday.setDate(dateToday.getDate()+orderTime);
var ready=dateToday.getMonth()+"/"
+dateToday.getDate()+"/"+dateToday.getFullYear();
document.getElementById("duedateField").value=due_date;
}
you should replace value=due_date with value=ready

Categories