I have an javascript alert :
<script type="text/javascript">
function checkDate(sender, args) {
if (sender._selectedDate > new Date()) {
alert("You can't select date later than today");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(null)
}
}
</script>
I want that text "You can't select date later than today" to set in 2 languages, to localize it in 2 languages.When I chose my application in English that alert should be in English and so on. How is it possible?
P.S that javascript i am using inside the asp.net form
Related
Hello I have input on registration form and want to retrieve the value of input and compare it with the current date using JavaScript and display message after check age if age less than 18 year and display custom message on the bottom of input.
var dateControl = document.querySelector('input[type="date"]').getFullYear();
var startDate = new Date(document.getElementById('date1').value);
and this is the HTML
<input type="date" name="date" class="form-control" id="date1" value="{{ old('date', date('Y-m-d')) }} " onclick="checkDate()">
<div id="currentdate"></div>
but is give old value after each click.
and the message not displayed
Best regards
Not much code to go from but I think you may need this function anyway to compare the date you receive from the form with the current date and get the difference
function process() {
var today = new Date();
var date = new Date(document.getElementById("date1").value);
var diff = Number((today.getTime() - date.getTime()) / 31536000000).toFixed(0);
if (diff >= 18) {
// Your form submission goes here
console.log("success");
} else {
// your error handeling goes here
console.log("error");
}
}
PS: That this method won't give you the difference in an exact way,
it will just give you the difference between the years.
I have an input box where you should put your year of birth in. If the number is below 1998 you should gain access, if it's over 1998 you should go to another page.
I know this could possible be a mixture of javascript and html, but I can't figure out how to make the code and hoped you guys could help me!
This is the action that should happen, if the user is born in 1998 or before:
<div id="btn-close-modal" class="close-modal-03">
CLOSE MODAL
</div>
Hope you can help me :-)
I'm using jQuery.
Get the year from the input - $('input').val().
Get the current year - new Date().getFullYear().
Check if the diff between them is larger than 18.
Like this:
$('#age_validation_btn').click(function() {
var age = $('#age_validation_input').val();
if (new Date().getFullYear() - parseInt(age) >= 18) {
alert('older than 18');
}
else {
alert('younger then 18');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="age_validation_input" /><button id="age_validation_btn">Validate</button>
A better way is to use :::
db=new Date("original time string from input field with type date here");
db1=new Date();
var d= db1.getFullYear()-db.getFullYear();
if (d>limit) {alert("decide what to do you are not upto limit");}
This is my html code with a snippet of just the code I am trying to use to invalidate/validate date entries with hopefully all of the corresponding and necessary variables declared.
<html>
<head>
<title> Booking Page </title>
<script>
function Booking(){
var departuredate = document.getElementById("departdate").value; //departure date selected by user
var arrivaldate = document.getElementById("arrivedate").value; //arrival date selected by user
departuredate = new Date(departuredate);
arrivaldate = new Date(arrivaldate);
CurrentDate = new Date(); //todays date
month = '' + (arrivaldate.getMonth() + 1),
day = '' + arrivaldate.getDate(),
year = arrivaldate.getFullYear();
var adate = [day, month, year].join('/');
alert(adate);
the adate is for the arrival date only. I plan to just copy and adjust the code across once it is correct for the departure date. Currently the code seems to invalidate all entries, not allowing completely valid entries to be validated.
var re = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
if (!adate.match(re))
{
document.getElementById("temp").innerHTML = "Incorrect format"
document.MyForm.arrivedate.focus();
document.getElementById("arrivedate").style.border='1px solid red';
return false;
}
else
{
// if none of the above situaton's occur then the input is true and validated
alert('Dates are validated');
return true;
}
}
</script>
</head>
<body>
<H1> Booking Form </H1>
<Form action="testpage.py" method="POST" name="MyForm" onsubmit="return Booking()">
<p>Departure Date:</p>
<input type=date name="departdate" id="departdate" >
<p>Arrival Date:</p>
<input type=date name="arrivedate" id="arrivedate">
<input type=submit value="Find flights">
</Form>
</body>
</html>
You have multiple problems here. First is that the date type for inputs is non-standard, so it won't work in most browsers (IIRC chrome, edge, and iOS safari are the exceptions).
I recommend that you either use a third-party library like jquery-ui-datepicker or use a text input with the validation logic using the html pattern attribute or a js event handler if you have to support desktop safari (which doesn't support the pattern attribute).
Something like <input type="text" pattern="/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/"...
Or if pattern won't work:
var myDateInput = document.getElementById('date-input');
myDateInput.addEventListener('change', function(e) {
if (!(e.target.value.match(dateRegex)) {
//let user know somehow
}
});
You can throttle the handler so that it doesn't fire on successive keystrokes. Also note that even in browsers with the date input type they expect "yyyy-mm-dd" format, so make your regex:
/[0-9]{4}-[0-9]{2}-[0-9]{2}/.
I am using a date picker that has a set range 1999:2005 however I only want from 08-01-1999 to be valid to 07-31-2005 so if the user selects outside of these dates I don't want my form to submit but instead prompt the user to add correct dates, I'm using parsley.js and was wondering if it is possible to add a date range in there to take care of this? If not I can add in my own validation.
You can fake it by using the parsley-beforedate="#elem" and parsley-afterdate="#elem" to refer to hidden, non-submitted fields which have these boundary values in them.
Alternatively, write a custom validator in JavaScript which you apply to these date fields along with the standard date validation. Here's one I wrote to prevent dates in the future. You can adapt it for your date range validation (note: it uses the datepicker routine from jqueryui).
$( '#formUpdate' ).parsley( {
validateIfUnchanged: true,
validators: {
// checks that a date is not in the future
// try needed because datepicker can throw an exception
notfuturedate: function ( fieldValue ) {
try {
var d1 = $.datepicker.parseDate("dd/mm/yy", fieldValue); // convert string to date
} catch (e) {
// if date is invalid, let the date check routine report it
return true;
}
var d0 = new Date(); // today
return (d1<=d0);
}
}
// some other irrelevant lines omitted
});
Having declared this new validator, you just put parsley-notfuturedate="true" on the input field and it works like a built-in parsley validation.
Also, if you are using a datepicker like the jqueryUI one , there are options (minDate, maxDate) to limit the range available.
<input type="text" placeholder="MM/DD/YYYY" required="" data-parsley-required-message="Date is required." data-parsley-pattern="^[0-9]{2}/[0-9]{2}/[0-9]{4}$" data-parsley-pattern-message="Invalid Date." data-parsley-maxdate="12/31/2019" data-parsley-mindate="01/01/2018" data-date-format="MM/DD/YYYY">
<script type="text/javascript">
window.ParsleyValidator
.addValidator('mindate', function(value, requirement) {
// is valid date?
var timestamp = Date.parse(value),
minTs = Date.parse(requirement);
return isNaN(timestamp) ? false : timestamp >= minTs;
}, 32)
.addMessage('en', 'mindate', '<div class="date-error">Date should be greater than or equal to %s</div>');
window.ParsleyValidator
.addValidator('maxdate', function(value, requirement) {
// is valid date?
var timestamp = Date.parse(value),
minTs = Date.parse(requirement);
return isNaN(timestamp) ? false : timestamp <= minTs;
}, 32)
.addMessage('en', 'maxdate', '<div class="date-error">Date should be less than or equal to %s </div>');
</script>
I am trying to use JavaScript to validate that the date selected is not earlier than today, but when I select today's date it's showing the alert box.
JavaScript:
function checkDueDate(sender, args) {
var td = new Date();
td.setMinutes(59);
td.setSeconds(59);
td.setHours(23);
//to move back one day
td.setDate(td.getDate() - 1);
if (sender._selectedDate < td) {
alert("You can't select day from the past! " + td + "");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
ASP.NET:
<asp:TextBox ID="txtDueDate" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="txtDueDate_CalendarExtender" runat="server"
TargetControlID="txtDueDate" OnClientDateSelectionChanged="checkDueDate">
</asp:CalendarExtender>
I think maybe you're complicating things too much. I would just subtract a day in miliseconds and it should work:
function isPast( date ) {
return date.getTime() < (new Date().getTime() - 864e5);
}
Demo: http://jsbin.com/igeyov/1/edit
the logic you have here seems to do exactly what you want - you have set the td variable which you evaluate against to the last possible second of todays date and you are checking if the selected date is before or equal to that. Todays date IS "before or equal to" 23:59:59 today...
Also, you have tagged this with c# , although it is all javascript and ASP.net as far as I can tell.
if you want to do select only future dates then you can try this code also....this is working with ajax calendar:
function checkDate(sender, args) {
if (sender._selectedDate < new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
Here is the HTML code:
<asp:TextBox ID="txtDOB" Width="180px" MaxLength="50" runat="server"></asp:TextBox>
<ajaxctrl:calendarextender onclientdateselectionchanged="checkDate" id="cale_txtDOB"
runat="server" targetcontrolid="txtDOB" format="MM/dd/yyyy" cssclass="cal_Theme1">
</ajaxctrl:calendarextender>
This code works only if you select past dates it will show a pop up " that you can not select past dates" whatever be it.
UPDATED CODE:
Here is code work if you dont want to include today's date also, you just want future dates only:
function checkDate(sender, args) {
if (sender._selectedDate <= new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
//sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
hope this will help you..