I'm new here, but I can't seem to find an answer to this question and my JS knowledge is amateur at best.
I have a PDF form that I have built so my team can create and then laser etch a nameplate. One of the fields is a manufacture date for the product. I tried setting the date format to ddmmmyyyy, but I also need the date in uppercase, which the Adobe date format doesn't seem to do.
I've done a metric ton of research and the best I could find is this:
event.value = util.printd("ddmmmyyyy", new Date()).toUpperCase();
This works great, except it enters today's date and I don't know how to modify it in order to make it work with a user entered date.
Related
I am using an input mask to enforce MM/DD/YYYY format on a <input type="text">.
I want to use autocomplete="bday", but I do not want to use the designated hyphen format specified by WHATWG.
What can I do about this? Can I just expect the mobile browser (mostly iOS / Android) to properly input the field into this box.
Use input of type date instead of anything else
In an ideal world, your input should be of type date rather than text. In theory, it provides the following advantages:
Input and display date in the user's preferred locale
Included calendar widget to select a date
Basic front-end field validation that normally ensure you to always have a valid date in yyyy-mm-dd format
In practice however,
The date input type isn't supported on older browsers / devices, especially some phones (where it's the most crucial!)
The input field(s) and/or the associated calendar widget isn't always very accessible (what a shame!)
You don't control the exact appearance of the component (ideally you shouldn't care so much about it, but well)
Using the most specialized appropriate input type for a given field if it exists, here date, is normally the best thing you can do, and is for sure the best thing you can do at long term, both from user and development/maintenance point of view. It's guaranteed by the standards, meaning that you can expect better support as the time goes without needing to do anything on your side, and that the feature won't disappear suddenly.
However, especially the loss of control on exact appearance, and the lack of support right now especially on phones where it's probably the most important, sadly result in choosing an input of type text, a serie of more or less accessible comboboxes and/or a most of the time not very accessible calendar instead of just a standard input date.
IF you can't or don't want to use input of type date
The autocomplete stuff always fills the field in the format yyyy-mm-dd, it contradicts your preferred format, and you can't change that. So you don't have many solutions:
Be lenient on what you accept as input, and in particular accept both yyyy-mm-dd and mm/dd/yyyy.
Catch the autocompletion of the browser and convert yyyy-mm-dd to mm/dd/yyyy when you detect it
Both wil make your input field less stable, less reliable, and less understandable for the user.
I guess it isn't easy to detect browser autocompletion reliably on all browsers, it's maybe even impossible, and the user can legitimately confused when the interface says "write your date in format mm/dd/yyyy" while the field contains yyyy-mm-dd (Which format should I use ? Which one is correct ? what is written in the field now, or what is given as instructions ?)
An input of type date would remove all that hastle, and this is, as you want or not, my final advice.
We can expect that accessibility and support will improve over time without the need for you to do anything. It has already improved a lot since input date were introduced several years ago. Forget out pixel perfect design. Embrass standards whenever possible.
I am making a web app which should accept a specific interval that is added to the target date to check if the request is expired. So I need an input with formatting: months:days:hours
Where months is limited to 12, days to 31, and hours to 24. I tried to use jQuery inputmask plugin
I made like this:
https://jsfiddle.net/qahxvspb/2/
But it doesn't work for some reason, I put a mask like this:
mask: "mm-dd-hh"
But in the input I get weird stuff, there is still placeholder mm-dd-yyyy, and I only can input year into it.
So 2 questions:
How to make a correct mask?
How can I make allow zero month in the mask? So, basically, it would be optional for the range, if I want I would just put 0 into month, check that on server, and create a range only from days and hours.
Javascript Date makes my head hurt because of things like what you are trying to do
I use a library called moment,which is available as a cdn or npm package
It can create input patterns like the one you have, do arithmetic on dates and then convert to the time format you want, even Javascript Date
I have be looking around for a solution for this but cant find anything. I am trying to reformat the date and time entered into a form, ideally with jQuery. I am not using the datepicker.
I am trying to rewrite dates so they come out in the format “dd/mm/yyyy” so if the user enters “050812”, “05082012”, “05-08-2012” etc the date gets rewtirred to “dd/mm/yyyy”. I am also trying to achieve this with time fields so the format will be “hh:mm”.
What would be the best way to achieve this?
Thank you
As #eicto said, datepicker is the best option.
But if you really want another way:
To show the to the user what's the right way to enter data: http://jsfiddle.net/bmSPs/1/
To mask the input: http://digitalbush.com/projects/masked-input-plugin/
OBS: If you want a more powerful way to control the hour you could also use http://keith-wood.name/timeEntry.html
I am writing a javascript to validate Date&time based on the two Dropdowns selected
Based on the dropdown change the validation has to be changed on Date&Time field
I am looking for the validation popup some thing like:
Entered Date&Time should be on or before 1 AM (Midnight) same day
I'm sure that a framework would help immensely (and I'm sure you'll get lot of suggestions to move to one) but if you're just looking for better Date handling you might want to look at my DP_DateExtensions component.
It'll allow you to very simply parse dates (create date objects from your drop-down field values using the Date.parseFormat() method) and then do date math and comparisons on them (in your case using date.compare() to compare the entered date to your target date).
You can then use the timeFormat() and dateFormat() methods to display date/times exactly as you want.
The component's old... but well seasoned and, at least to me, insanely useful.
I'm having trouble finding an elegant way to allow for date/time input in an html form. I am thinking of having drop down menus for year, month, day, hour, minute, second, millisecond that are populated with valid entries only. I could do this by hard coding values for each drop down menu, but I'm thinking there must be a more elegant way to do this, perhaps with some already existing javascript library that I have not found yet. Any tips for getting this done?
edit: Second, and if possible, millisecond precision is needed for what I'm working on.
edit#2: After reading some of the comments, I have come to the realization that it is probably a bad idea to have drop down menus for the large range of values required by hours/minutes/seconds and especially milliseconds. I think will go with having the DatePicker prototype date chooser, along with a simple textfield for time input.
This can be done quite elegantly with a Jquery plug-in called Datepicker
There are many calendars which can do this, with both date and time :
Calendar Date Select
Control.DatePicker (based on PrototypeJS) my favourite, I made an enhanced version, with more features, I can share it
Dynarch calendar but I find it too heavy
and others
I think a very easy way to do this is by using PHP i.e. for making choosing a day and a month:
Use the select command for the form, then insert a PHP line to initiate a for loop. So for the days the loop would go from 1 -> 31 and for the month from 1 -> 12. So instead of hard coding it for all the days months etc, you can neatly fit it into one line of code with a small bit of PHP added.
You could expand on on this plugin since you want second/millisecond
http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick