Validating date, time start and time end with javascript - 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/

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>

Need only 00:00:00 time format in HTML

I am developing webpage in which i have used text field and set it's type as time. But it is giving me 00:00 AM/PM format.
I want 00:00:00 as time format.
use jquery timepicker
$(function(){
$('#example').timepicker();
});
check this link
Just add the step attribute to the element. Note: You might want to implement your own time type if you need cross-browser support. input<type=time> does not work in Safari.
<input type="time" step="1">
In case you need own implementation, here it is. Requires no third part library. To access the value just get the value of the timepicker div
using document.getElementById("timepicker").getAttribute("data-value");
function updateTime()
{
function getFormattedValue(value)
{
return value>9?value:"0"+value;
}
var hour = document.getElementById("hour").value,
minute = document.getElementById("minute").value || 0,
second = document.getElementById("second").value || 0;
var time = getFormattedValue(hour)+":"+getFormattedValue(minute)+":"+getFormattedValue(second);
var timeelem = document.getElementById("timepicker");
timeelem.setAttribute("data-value", time);
console.log(time);
console.log(timeelem.getAttribute("data-value"));
}
<div id="timepicker" data-value="">
<input id="hour" type="number" max="23" min="0" onchange="updateTime()">
<input id="minute" type="number" max="59" min="0" onchange="updateTime()">
<input id="second" type="number" max="59" min="0" onchange="updateTime()">
</div>

convert DD/MM/YYYY to YYYYMMDD to compare it with a given string

I wanted to convert Date to a string by removing "/" and to make it YYYYMMDD to compare it with first 6 characters of a given string.
HTML:
<div class="cust-dob">
<span class="input-append date form-control2" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy" placeholder="">
<input class="span2 valid" size="9" name="custdob" id="custdob" type="text" placeholder="DOB" value="" readonly="" aria-invalid="false">
<span class="add-on"><i class="fa fa-calendar" aria-hidden="true"></i></span>
</span>
</div>
<input type="text" class="form-control2 resizeselect" name="nric" id="nric" placeholder="" size="12" value="">
Script:
$("#nric").blur(function(){
var ic = $("#nric").val();
var dob = $("#cust-dob").val();
var updateddob = new Date(dob.split("/").join(""));
if(ic != updateddob){
alert("wrong nric");
}
console.log(updateddob);
});
Please help me fix this issue.
I think you want to compare two differently formatted date strings. I have two ways you can do this:
Keep it to string operations
Use moment.js
You seem to be trying to use date conversion and string operations at the same time, which can only add confusion. Keep it simple.
Code Snippet:
var a = '20111031';
var b = '31/10/2011';
// STRING OPERATIONS:
console.log( b.split('/')[0] === a.split('').slice(6).join('') && b.split('/')[1] === a.split('').slice(4, 6).join('') && b.split('/')[2] === a.split('').slice(0, 4).join(''));
// true
// MOMENT.JS:
console.log(moment(b, 'DD/MM/YYYY').format() === moment(a, 'YYYYMMDD').format())
// true
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

How to split date and find out if day is Sunday in jquery

I have a form which has a 'date' input field:
<form method='post' id="register-form" novalidate>
Date: <input type="date" name="date" id="date"/>
<input type="submit" name="insert" value="Save"/>
</form>
Now what I want, when I select a date that equals to "Sunday" it should then prompt me that "You've selected Sunday". How is it possible to make it in jquery.validator method?
You could use JavaScript's Date.getDay()
$(document).ready(function() {
var d = new Date();
alert(d.getDay());
} );
As stated you don't need jQuery to use this but I've wrapped it in jQuery for your pleasure. As stated by nc3b the result its 0 based where 0 is Sunday.
You can have a look on this
$("body").on('change','#date',function(){
var date = new Date($("#date").val());
if(date.getDay()=='0')
alert("You selected sunday");
});

How can I set the timePattern in a dijit.form.TimeTextBox to show hours:minutes am|pm

I have this dojo TimeTextBox in the HTML:
<input type="text" id="startTime" value="" dojoType="dijit.form.TimeTextBox"></input>
and this JS code:
dojo.addOnLoad(
function(){
var sartTime = dijit.byId('startTime');
}
)
So how do I format the time to look like HH:mm am|pm
Use the constraints.timePattern attribute:
<input type="text"
id="startTime"
value=""
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'h:mm a'}" />
You'll still get a Date object when you ask the TimeTextBox for its value though. To actually get a string on the format HH:mm am|pm| you have to convert it manually afterwards.

Categories