I'm trying to create a component that consists of a <select> that will contain options that are months and their values are their numerical dates (eg: Jan = 1, Feb = 2, etc.), and the day and year are controlled with regular number inputs. All of this will return a date format like `"9/26/2019"
So far I'm able to do that with selecting the month and returning something like "12", but I'm not sure how to handle the day and year.
I'm also using a library named luxon to get the current day using DateTime.local().toLocaleString() in hopes to have a default value passed in to these inputs, but I'm also not sure on how to achieve that.
so far, this is what I have:
https://codesandbox.io/s/gallant-shaw-qpc9r
My question is: is there a method to completely handle all of these at once and output a format like MM/dd/yyyy? Or should I stick to having 3 completely different inputs that will control each field? Or is there a way I could leverage Luxon to return the date format I need?
Related
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.
I have one text box. When I enter a date with the format MM/DD/YYYY in that textbox and click outside the textbox I need to display the result as MM/DD/YYYY+3 using JavaScript.
For example, if my date is 12/31/2013 then the result would be 01/03/2014.
Hope this link will help you to find the answer:
adding-number-of-days-to-an-entered-date-in-javascript.
Have a look at the excellent library moment.js with which you easily can add three days to your original date.
In your case it would be something like:
var input = moment(myTextBoxValue);
input.add('d', 3); // input is now 3 days later
I guess the easiest to program and best readable solution would be to use a dedicated library for handling dates, such as Moment.js.
There, you have got the add function which allows you to add an arbitrary amount of time to a given point in time. E.g.:
moment().add('days', 7);
If you use the moment function to parse the time entered, use that as your source value, call add on it, and return it as JavaScript Date using the toDate function, you get exactly what you want.
So basically it comes down to:
var sourceDate = moment(new Date(2013, 7, 8)),
targetDate = sourceDate.add('days', 3),
result = targetDate.toDate();
Then, result contains the Date object you wanted to have.
I'd prefer that over native JavaScript handling of Date, as it is way more readble and hence understandable.
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.
Imagine there are two labels on a webpage both displaying a date. How would you find out which is the greater date taking into account what the users locale is.
Say Label 1 : 04/11/2009 Label 2: 09/10/2009
If it were in the US Label 2 > Label 1
If it were the UK Label 1 > Label 2
The date constructor ignores locale information so var d = new Date('04/11/2009') will always be the 11th April 2009 rather than the 4th November 2009 no matter the locale. Does anyone know any tricks to get around this? Any libraries worth checking out?
(the only wayout i can see at the moment is get the locale info using js and then parse the label so i can create a date object with another constructor but this seems to much for a supposedly simple problem?Furthermore this is not going to work well with lots of locales)
Recommend using a library like Globalize.js or Date.js
It appears I can't use the javascript Date object as it inherintly defaults to US dates when you initialise with a datestring. There is no way of passing any culture information to the date object
I.e. No matter what the clients locale settings are
var d = new Date("08/10/2009") will always create a date object representing the 10th August 2009 rather than the 8th October 2009 if the clients locale was the UK.
So given that my requirement is to be able to add/subtract days/months/years easily is there a clever way of doing this easily without the Date object
All i need to do is add a day to a date (or a string representation of a date). so if my code detects the locale setttings are in the US, when it sees a string like "10/08/2009" it whacks it up to "10/09/2009" but if it had detected it was in the UK it would have know it a uk string representation of a date and whacked it up to "09/10/2009"
For date manipulation and localization on JavaScript I always recommend the DateJS library.
This library abstracts the use of Date objects, has a very good localization options, powerful date parsing and formatting, and it also has a very nice fluent API.
If you know you are getting input formatted dd/mm/yyyy you can easily assemble the correct date.
function britDay(D){
D= D.match(/\d+/g);
return new Date(+D[2], D[1]-1, +D[0]);
}
toLocaleDateString will return the date in the format expected by the user.
Relying on the user input that obeys particular formatting rules is optimistic-
which is why most sites use separate, labeled inputs or select fields for the month, date and year.
You probably know that it's easy to add one day to a date, just add 86,400 * 1000 milliseconds to the date. It sounds like displaying in your locale is the issue; does Date.toLocaleString() not do the right thing for you?
dojo.date.locale.parse will be able to parse a formatted string according the locale of your choice. It has a table of cultural data based off unicode.org/cldr. See this article for more information.