Add info about HTML and JS new features #327

xfq · 2021-12-02T11:51:15Z

Fix #7.

Changes:

Remove "intended audience"
Change the question from "How do I prepare my web pages to display varying international date formats?" to "How do I manage date formats on a web page?"
Divide the article into two parts: input and output of dates
Mention the date & time markup in HTML5
Mention the JavaScript Date object (I choose not to mention Temporal for now, because I want to wait until there are at least two shipping implementations)
Remove the information on Java/JSP, ASP, and Perl. I don't think these can provide much guidance to developers nowadays, because Java/Spring and PHP are much more popular.

r12a · 2022-08-16T14:43:22Z

@xfq i just came across this. Do you want to continue to make these changes? If so, i think we need to solve the conflicts first. Then i have a number of suggestions ranging from organisation of sections to typos.

xfq · 2022-08-17T05:02:31Z

Do you want to continue to make these changes?

Yes. I have resolved the conflicts.

r12a · 2022-08-17T09:43:25Z

ac0a810#diff-925e46831aa6b3e93b26574309eda5813c4092dc831e2dfa6757c86b0a167c72 is showing a massive number of changes to the repo. I'm not sure what that's about, and whether it means all the files mentioned will be updated (which is not a good idea). Could you take a look and let me know?

xfq · 2022-08-17T11:58:49Z

That's normal, as I need to resolve the merge conflicts. Those modifications are already in the gh-pages branch.

himorin · 2022-08-17T14:07:56Z

That's normal, as I need to resolve the merge conflicts. Those modifications are already in the gh-pages branch.

In addition, some more explanation. When some branch is created at 100th history of HEAD, and bunch of updates are committed to HEAD during discussion held in PR of the branch - like 170th HEAD, the branch is ahead of HEAD over 70 commits. If there is conflict(s) between PR and ones during 70 commits, conflicted file(s) are required to be resolved. For this, there are several ways, like:

take updates between 100th and 170th HEAD, per file which is modified within the PR (named as resolve conflict button on merging)
just rebase from 100th to 170th HEAD, like modify history of PR from '100th HEAD -> commit for PR' to '170th HEAD -> commit for PR', which results to modify the PR as started from 170th HEAD
merge from origin/HEAD to the PR, which applies all modification happened on HEAD, like taking all commits between 100th and 170th into the PR (history will be 100th HEAD -(fork)-> commit for PR -> all changes between 100-170)

For the last, commit for merging all changes (e.g. 100th to 170th in example above) will be shown lie ac0a810, but Files changed tab in PR will show will show only changes between 170th HEAD and the PR which is similar to the original change for the PR.

xfq · 2022-08-17T23:33:11Z

Thanks for your explanation, @himorin!

questions/qa-date-format.en.html

r12a · 2022-09-01T10:42:58Z

questions/qa-date-format.en.html

+      HTML5 introduced <code class="kw" translate="no">input</code> elements of type <code>date</code>, <code>time</code>, <code>datetime-local</code>, <code>month</code>, and <code>week</code>, which let the user easily enter a date or a time, like:
+    </p>
+
+    <div style="margin-inline-start: 25px;">


What should one make of the fact that my browsers (Gecko, Blink, and WebKit) all present the selected date with the order DD-MM-YYYY? This is not the ISO order we talk about later. It's also a purely numeric number format, which we discourage later.

Are there ways to adapt the displayed date in the input control to local approaches?

In my computer (macOS), Firefox uses DD/MM/YYYY and Chrome uses YYYY/MM/DD. My language preference in both browsers is English (GB), so I'm not sure what would affect this either.

r12a · 2022-09-01T10:47:53Z

questions/qa-date-format.en.html

+
+    <div style="margin-inline-start: 25px;">
+      <p>
+    <label for="date">&lt;input type="<strong>date</strong>"&gt;</label>


I think we probably need to talk about 'storage' in this section too – ie. what happens when a user selects a date? How can the content author get at that information and what format is it in?

We may need to decide whether it's appropriate to describe something similar to https://html.spec.whatwg.org/multipage/forms.html#writing-a-form's-user-interface (though specific to date/time formats).

I think we probably need to talk about 'storage' in this section too – ie. what happens when a user selects a date? How can the content author get at that information and what format is it in?

Thanks. Added.

We may need to decide whether it's appropriate to describe something similar to https://html.spec.whatwg.org/multipage/forms.html#writing-a-form's-user-interface (though specific to date/time formats).

I personally don't think it's necessary, unless you have good scenario suggestions.

r12a · 2022-09-01T10:48:47Z

questions/qa-date-format.en.html

+      <p>
+    <label for="date">&lt;input type="<strong>date</strong>"&gt;</label>
+      <input type="date" id="date" name="date"
+       value="2021-12-07"


It seems to me that these pickers are mostly useful for picking a date that is close to the current date. For example, it appears to be difficult to select a date such as 12 Dec 1876.

Indeed. Do you think we need to mention this limitation?

I just tried it again, and it seems that you can directly modify the text without using the special UI to select. This way, it's not that difficult to specify a date decades ago.

Yes, i realised later that i was unable to do that because that example had limits applied to it :(

r12a · 2022-09-01T10:49:43Z

questions/qa-date-format.en.html

+    </p>
+
+    <p>
+      <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#dates-and-times">HTML</a> uses a variation of the <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> standard for its date and time strings. The date and time strings do not include the time zone data. The time zone data can be stored on the server-side separately if needed.


So, how does one allow a user to specify the time zone? Is it picked up automatically from their system? etc.

They can use getTimezoneOffset(). I added that to the article.

r12a · 2022-09-01T10:51:51Z

questions/qa-date-format.en.html

+    <h2 id="input">User input</h2>
+
+    <p>
+      When it comes to accept data from the user, we usually use the <code class="kw" translate="no">input</code> element in HTML.


What's the objective of this section? Currently it just lists a few items of information about date/time selection, but how does that tie into the tasks that a content author is faced with? What are the pros and cons of the approaches listed?

I rewrote this paragraph to add the task that a content author is faced with.

Aside from the possible interop issue, I don't see any significant downsides of using a special date picker interface.

r12a · 2022-09-01T10:52:48Z

questions/qa-date-format.en.html

+    </p>
+
+    <p>
+      Maybe you're using your customized date and time picker and not planning using the <code class="kw" translate="no">input</code> element, but you need to store it in a standard format to be able to share it with others.


And what is that standard format?

This paragraph may belong at the beginning of the section, to set up the idea that you can either create a custom control or use one of the ready-made controls provided by the browser. The section would then set about giving recommendations about which to use and how to use them.

We should also mention that if you use a custom control you need to understand the input the user provided, which may be in various different formats, and you need to validate the format sent to the server.

And what is that standard format?

ISO 8601 would be the most widely used format.

This paragraph may belong at the beginning of the section, to set up the idea that you can either create a custom control or use one of the ready-made controls provided by the browser. The section would then set about giving recommendations about which to use and how to use them.

Fixed.

FYI - here are some custom controls I've seen:

Ant Design

Vuetify

Element

Quasar Framework

React Datepicker

r12a · 2022-09-01T11:07:22Z

questions/qa-date-format.en.html

+    </p>
+
+    <p>
+      You can set a default value for the input by using the <code>value</code> attribute or restrict the date or time using the <code>min</code> and <code>max</code> attributes.


And step. What about 12 vs 24 hour clock settings?

Should we mention the autocomplete features?

This is part of the 'storage' topic: if you set a default value, it needs to follow the ISO format, not the local order/composition. We should describe that, i think.

You may find some inspiration from https://html.spec.whatwg.org/multipage/forms.html#input-author-notes (especially the latter half of that subsection).

r12a · 2022-09-01T11:30:56Z

questions/qa-date-format.en.html

-      <p>Use <code>$ENV{'HTTP_ACCEPT_LANGUAGE'}</code> to get the preferred language. Use <code>POSIX:strftime</code> to format date values.
-        You'll have to do your own mapping of the accepted languages value to a date format string.</p>
-    </div>
+    <p>How this is done will vary depending on your development environment.</p>


The section "Store and display a date" also seems to lack focus. In fact, i think it's trying to do 2 separate things:

describe how local date/time formats can be different and problematic, and what works or doesn't work if you try to use a generic format

describe how to produce dates and times in your code (one method described is that using JavaScript – but it doesn't mention the time element in HTML

Is option 3 really something useful these days? Or is it part of the discussion "How language interacts with date/time settings and where to get the language from" ?

r12a · 2022-09-01T11:49:36Z

questions/qa-date-format.en.html

@@ -3,15 +3,15 @@
 <head>
 <meta charset="utf-8" />
 <title>Date formats</title>
-<meta name="description" content="How do I prepare my web pages to display varying international date formats?" />
+<meta name="description" content="How do I manage date formats on a web page?" />


This review focuses mainly on the first section of the document. There are lots of comments: don't feel overwhelmed. I'm basically trying to understand what is the need of the content author that we are addressing, and how best to meet that/those need(s). The initial scope of the article was fairly limited and specific (albeit perhaps in need of updating). We've widened that scope significantly here and we need to, i think, in our minds have more clear vision of what we are trying to achieve and more rigorous control over what text we use to achieve the goal. Part of that involves also deciding to what exent we describe the how-to steps in this article and give example, compared with pointing off to other sources for those things.

netlify · 2023-02-08T13:55:47Z

✅ Deploy Preview for i18n-drafts ready!

Name	Link
🔨 Latest commit	`a7643ad`
🔍 Latest deploy log	https://app.netlify.com/sites/i18n-drafts/deploys/63e3a9d009057a0008dbc5b6
😎 Deploy Preview	https://deploy-preview-327--i18n-drafts.netlify.app/questions/qa-date-format.en
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Add info about HTML and JS new features

66aade8

xfq requested a review from r12a December 2, 2021 11:51

xfq added 3 commits December 9, 2021 13:51

Move a paragraph

8175fab

Change the question

093fbfc

Add intro

80df8cd

Merge branch 'gh-pages' into xfq/qa-date-format

ac0a810

xfq added 8 commits August 22, 2022 10:40

Move the headings

5d8fe11

Typo fix

ff0c79f

Markup fix

67d45a5

Editorial fixes

32f26d1

Mention customized date and time picker

0a306b6

Clarification

6dbad0f

Point to MDN

33a32e9

Update the authors

4ea7edc

r12a requested changes Sep 1, 2022

View reviewed changes

xfq added 7 commits September 2, 2022 16:20

Remove the heading

fa3e8ea

Add information on how the content author gets the information

765e8be

Mention getTimezoneOffset

2262a28

Add what the content authors are achieving

2676d8d

Add more information on customized date and time picker

c90f8f1

Add the step attribute

77a6ff9

trigger netlify

a7643ad

w3c deleted a comment from netlify bot Feb 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add info about HTML and JS new features #327

Add info about HTML and JS new features #327

xfq commented Dec 2, 2021 •

edited

r12a commented Aug 16, 2022

xfq commented Aug 17, 2022

r12a commented Aug 17, 2022

xfq commented Aug 17, 2022

himorin commented Aug 17, 2022 •

edited

xfq commented Aug 17, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

xfq Sep 2, 2022

r12a Sep 2, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

xfq Sep 2, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

r12a Sep 1, 2022

netlify bot commented Feb 8, 2023 •

edited

Add info about HTML and JS new features #327

Are you sure you want to change the base?

Add info about HTML and JS new features #327

Conversation

xfq commented Dec 2, 2021 • edited

r12a commented Aug 16, 2022

xfq commented Aug 17, 2022

r12a commented Aug 17, 2022

xfq commented Aug 17, 2022

himorin commented Aug 17, 2022 • edited

xfq commented Aug 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 8, 2023 • edited

✅ Deploy Preview for i18n-drafts ready!

xfq commented Dec 2, 2021 •

edited

himorin commented Aug 17, 2022 •

edited

netlify bot commented Feb 8, 2023 •

edited