Validate input date in Javascript - 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/

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>

How to display selected month dates only in date picker with respect to selecting month in another text box?

I have 2 text boxes, one is to choose month and year, and another with dates. My both date pickers are working fine, but what I need is when I select month and year from one text box, my date picker for another text box needs to display selected month's dates only.
Here is my code:
<div class="col-lg-3">
<label>Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
<div class="col-lg-3">
<label>Date From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtDateFrom">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
My Javascript:
<script>
$(function () {
$('#txtMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months"
})
$('#txtDateFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
})</script>
This is my month selection textbox. If I select Sep 2019 it means, only sep month dates need to display in dates displaying datepicker.
Or if removing those previous and next icons on date calendar also enough for my requirement.
How can I achieve this?
what you can do is get the index of month you clicked and match it with the month of dates calender if both matches you can show that month date specifically OR give the same id to both year month and date month calender and run a for loop if both matches show it otherwise display hidden

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this
Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});
see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
try using step: 60 not steps
please check this link also :click here

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>

Categories