how to append - automatically in date format in jquery - javascript

I have a text box i need to append "-" in date format
Like I type DD-MM-YYYY in text box
when users enter Date-(This should automatically come) than month (- this should automatically come ) and than later year
so when i enter something in text box like this
29-06-1992
How to do it in JavaScript or Jquery

Try this one:
$(document).on('keyup','#your_textbox_id',function(){
if($('#your_textbox_id').val().length == 2){
$('#your_textbox_id').val( $('#your_textbox_id').val().substring(0,2) +'-')
}
else if($('#your_textbox_id').val().length == 5){
$('#your_textbox_id').val( $('#your_textbox_id').val().substring(0,5) +'-')
}
})

Related

Checking difference between two date and display custom message

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.

Resources for javascript alert

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

jquery filter comparing dates

I'm currently trying to create a filter that will allow me to select a date using jQueryUI datepicker. This date will then be compared to the value of a hidden input. The parent div of the hidden input will then be hidden using .hide() function if the hidden date is less than the date select using the picker.
<div data-value="I0001-APP0277-S" class="server_wrapper" style="display: block;">
<div class="detail_wrapper">....</div>
<input type="hidden" class="buildStart_hidden" value="4/25/2014 1:46:19 pm">
</div>
<input type="text" id="buildStart_filter" class="secondary_live_filter hasDatepicker">
Using this code:
$('#buildStart_filter').change(function(){
var date = $(this).val();
$('.buildStart_hidden').each(function(){
if(date>$(this).val().split(' ')[0]){
$(this).parent().hide();
}
});
});
But using this code doesn't work. I think it may be due to the comparison of string values rather than date values. What can I change to make the comparison work?
Maybe:
You missing to remove the hour from DATE
date.split(' ')[0] > $(this).val().split(' ')[0]
After some more work I have figured out the problem.
I was trying to compare string types and not Date types.
This code is working now as hiddenDate and FilterDate are Date() types and thus can be evaluated using >= operator:
$('#buildStart_filter').change(function(){
var filterDate = $('#buildStart_filter').datepicker('getDate');
$('.buildStart_hidden').each(function(){
var hiddenDateStr = $(this).val();
var hiddenDate = new Date(hiddenDateStr);
if(filterDate>=hiddenDate){
$(this).parent().hide();
}else{
$(this).parent().show();
}
});
});

Is it possible to specify a specific date range to validate using Parsley.js

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>

How to add dates from the date updated in text box

I am using a form to input date in text box format (mm/dd/yyyy) and the next text box I will enter how many days to add. This is should automatically calulate the no of days and display in 3rd text box. E.g
Text Box1: Input date (mm/dd/yyyy)
Text Box2: Input no of days
Text Box3: textbox1 value+textbox3 value
I need help to add dates.
I tried in onblur event in textbox2 using Javascript function
Code:
//text box2 event
onblur="adddate(this.value)"
//javascript fn
function adddate(a) {
var rdat=document.telstoe.rdate.value;
if(a==2) {
document.telstoe.tdate.value=rdat+2;
}
}
Input Values:
Textbox 1: 11/14/2012 (mm/dd/yyyy)
Textbox 2: 2 or 3 or 4
The output should be: only the days should be counted and displayed and I am getting like 1/14/2012*2*
Please help with the correct code
try this:
function adddate(a) {
var tdate = document.telstoe.rdate.value;
var theDate=new Date(tdate);
theDate.setDate( theDate.getDate() + a );
document.telstoe.tdate.value=(theDate.getMonth() + 1) + "/" + theDate.getDate() + "/" theDate.getFullYear();
}
and use this page for your reference:
http://www.w3schools.com/jsref/jsref_obj_date.asp
Please have a look at the object reference! It would be preferred for your own sake, to learn the javascript Date object. Good luck.
You can use a Date object to parse the date and add days to it:
var date = new Date(document.telstoe.rdate.value);
date.setDate(date.getDate() + 1);
document.telstoe.tdate.value = (date.getMonth() + 1) + "/" + date.getDate() + "/" date.getFullYear().toString().substring(2);
Or use something like the jQuery UI datepicker to format the date.

Categories

Resources