Problem: Date input onchange running function on number keys input - javascript

I have 2 date fields; end_date and to_date. When end_date is set to before to_date it changes to_date to the value of end_date.
The problem I'm having is if the user types in the date field rather than using the calendar picker, it accepts each of the keypresses as a valid date.
For example: Both end_date and to_date = 18/10/2022
The user wants to change end_date to a later date (ex 20/11/2022), so in theory it should not change to_date.
When the user then goes to type 20 the date field will run the function with the date 02/10/2022, thus changing to_date (because typing "2" will change the date to 02).
The only solution I have right now is just making it impossible for the user to use number keys in the field, however this is not optimal. Does anyone have a better solution?

Related

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.

Searching in input gives incorrect date in material date picker need to convert it into UTC

I am extending MomentDateAdapter for my requirement. When i am selecting a date from the calendar i am getting the correct output but when i manually type something in the input field i get wrong output.
For the selected date i am using _moment.utc({ year, month, date }).locale(navigator.language); to convert the selected value to UTC format but i am not sure on how to do the same when user searches in the input field.
StackBlitz.
to reproduce:
Try to select a value from calendar and see the console (notice the date is converted to UTC)
Now try to add a date manually by typing in and see the console (date is not converted to UTC).
You need to adapt your parse method call of moment to:
return moment.utc(value, parseFormat, this.locale, true);
to get utc Date from your input.
Here is your adapted Stackblitz.
The methods format and createDate are called if you set your date via picker, the parse method is called if you set it via input.

Form date validation in a form

I have a form with 2 fields, in one of theme the user will enter a date in the format dd/mm/yyyy and in the other the user will enter a time in the format hh:mm
How can I force this fields formats and how can I validate the date field in order to make sure the date entered is valid and its bigger then the current date and the time field in order to make sure it's a valid time.
I'm using JavaScript in this web site.
For dd/mm/yyyy use
< input type=date>
For hh:mm:
< input type="time">
Set a processing function on form's onsubmit field. In that function you can get a value of dates ( with help of document.getElementBy* functions ) and compare them with DateTime object( use default constructor to get current date).

PDF Form Date Calculations and Restrictions?

I have made a PDF Form, I still have the following tasks to be done, any help will be useful:
Date Picker: Is there any Hijri/Gerogian Datepicker known to work on PDF Forms.
Date Compare: I have to date fields, want to validate the the end date field to be equal or more than the start date.
Calculate Date: Want to calculate the number of days between two dates.

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