How to do validation for date field in angular - javascript

I need validation for the date field in angular8 or 10
Format- DD/MM/YYYY
Conditions:
->First, if the user enters [32] it should show an error message because max dates are 31 only every month.
->if he enters [31/02] then again, it should show an error because February doesn't have 31 days like this for every month
->If he enters [21/01/156277] again, it should show an error because the year should contain only 4 digits at last.
->I need validation in this way
->After date and month slash symbol should apply automatically if it is not the possible user should enter manually
->please help me with this https://stackblitz.com/edit/angular-bstzvt?file=src%2Fapp%2Fdatepicker-overview-example.ts
->I have written some conditions but not getting where to apply them please help me with this

i try so much and i think find it. see this :
https://stackblitz.com/edit/angular-bstzvt-hnusdx?file=src/app/datepicker-overview-example.html

Related

Only show 3 first characters of months from Input type Month

So I'm using the input type "Month" and is showing fine the month in this format: January 2021, so besides that, I want to achieve something else just to show the first three characters, for example: Jan Feb Oct, is there any attribute or way to do it?
Or lastly a library that offers that (but I want to avoid this)
My Input:
<input type="month" value="full-date-here" />
The problem here is because I have full time data, and the input formats it to Month Year, so that means, I can't touch the value itself, the format somehow?
May as well post as an answer, but can't you just return the first 3 letters (you can probably apply a formatter instead of this):
yourValue.substring(0, 3);. You might need to call toString() first.

Way to make date field to show only past date(less than current date)

Could you please share a sample custom object code to restrict the user from selecting the future date and populate a warning message from the questionnaire?
Using version -6.9 SP2
I am not really sure what you really want but what I am guessing is that you want to ensure that user only pick dates earlier than the current date in date input element.
For this you can use the "min" value of the date input field and set it to current date.

Is there any solution for "Uncaught Invalid Gregorian date" in JS when i am entering year for the first time?

I am entering the date in input boxes separately, that means we can choose any field to give input for first time among day, month and year. But, when i am entering year for first time. It is giving me error saying "Uncaught Invalid Gregorian date". Any inputs on this from anyone?
new Date(yearValue, monthValue-1, dayValue);
Using above function for date selection.
I am passing the input value for year only as => 1900

JavaScript setting dates in textboxes not consistent

I have a couple of textboxes where a user set a from date and to date from a button click which adds 7 days or substracts 7 to whatever is the current value in each box.
When the page is first loaded the dates that are added into the textboxes are based upon the user belonging to a group. Thus if a user belongs to group A, the from date is a Sunday, but if the user belongs to group B it is a Friday. This logic I set in the page load event in my ASP.Net page.
The situation that is baffling me, is whilst I can set the dates, and get my JavaScript to work with group A, if a switch the user to group B, and click on a button rather expecting the date in from changing from 17th January 10th January, it jumps to 29th December 2014. It seems to be getting a completely differently value initially 5th January 2015.
The JavaScript I have is:
var fromDateIn = new Date(formatDate(document.getElementById('<%=txtFromDate.ClientID%>').value));
var newfromdate = new Date(fromDateIn);
In one of the button event, I have:
function setNewFromDate() {
newfromdate.setDate(newfromdate.getDate() - 7);
document.getElementById('<%= txtFromDate.ClientID%>').value = formatDate(newfromdate);
var toDate = new Date(newfromdate);
document.getElementById('<%= txtToDate.ClientID%>').value = formatDate(toDate.setDate(toDate.getDate() + 6));
}
As I say, everything works perfectly and I get the right dates when the user is one group, but as soon I change the user to another group and set the initial from and to dates, I get this problem. Can anyone please advise I can get consistency in this?
Thanks
There is a problem with the way you are instantiating fromDateIn. You are passing it a value in the format dd/MM/yyyy, but the date constructor that takes a single string value is locale dependent and is treating the input as MM/dd/yyyy. This results in a completely bogus value for fromDateIn that throws everything else off.
You should find a way to determine the year, month and day for the start date (either by parsing it out of the textbox value or having the ASPX logic stuff it into the page somehow). And instantiate the date using the new Date(year, month, day) constructor. (This requires bearing in mind that month is 0-based [i.e. January = 0, February = 1]).
This line:
newfromdate.setDate(newfromdate.getDate() - 7)
Looks like you're trying to move back a week. This will fail. setDate changes only the Day of Month. Can you guess what happens when Day of Month is less than 7?

how to validate and add date using jquery

I am working on a health website.
I am having a field called Last Menstrual Period, its a textbox which has to be filled in by doctor in format of YYYY-MM-DD.
What I want to do is, I have to add 281 days into the LMP date that the doctor will be entering in order to generate the Expected Delivery Date (Child Birth)
So I need followings thing to do:
The date entered should be in format of YYYY-MM-DD
It should be a valid date i.e. taking care of leap years and invalid dates like 2013-02-31 etc.
After generating the Expected Date of delivery (based on LMP that is entered), it should be displayed on screen.
As soon as the date is entered in the LMP textbox, these validations should be performed and the Expected Date Of Delivery is displayed inside a tag below the LMP textbox
How can I do that? Here is what I have tried so far.
// Calculate Expected Date Of Delivery
$('#lmp_date').change(function()
{
var lmp_entered = $this.val();
if(lmp_entered)
{
// $('#edd').html('1');
}
else
{
// $('#edd').html('Please enter last menstrual date to calculate EDD');
Please help me how to implement these validations and display the date using jquery. I am a newbie in jquery so dont know much about it. Any small help will be highly appreciated.
for validation I don t recommend using another library especially for such a simple rule. if the rule is so strict just write your own and use it site wide.
For example block non-numberic entries to textbox and add dash "-" by your code in every 5th and 9th chars.
Then to validate check the length of text and dashed, use split to get year. month and day separately and convert it to date with Date(txtYear,txtMonth,txtDay) if your date's year, month and day are equals to your txtYear, Month and Day then it means it s a valid date. After that use the below to calculate birth date.
just use Date constructor like below
var delDate = new Date(year, month, day + 281)
Just don t forget months start 0 in JS so Jan = 0, Feb = 1 etc.

Categories