Date field on HTML Dialog

Hi folks,
I have an extension with an HTML dialog to edit some fields. One of the fields is a date, so i added an input type Date to my form using something like :

This gives me a default input field with a calendar button.

The date format is set to US notation mm/dd/yyyy but i want to show the dutch format dd-mm-yyyy

What settings are used for this display in an html dialog that i can possibly manipulate? Or is it connected to the installed language?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser , but the parsed value is always formatted yyyy-mm-dd .

Some workaround e.g. in here: javascript - Input date format with dd/mm/yyyy in the input field - Stack Overflow

2 Likes

In all my browsers my date is displayed as dd-mm-yyyy since my region settings and browser settings are all set to Dutch, so there it all works as expected. In Sketchup 2023 HTML dialogs i still see mm/dd/yyyy, while i would expect it to use the same settings.

I guess, you have en-XX locale in Sketchup HTML dialogs, you can test with this:

def test_lang

  @w = UI::HtmlDialog.new({:dialog_title=>'Language test'})
  @w.set_html <<-HEREDOC
  <html>
    <body>
      <input type="date" value="2023-12-24" />
      <p id="lang"></p>
      <script>
        var language = window.navigator.userLanguage || window.navigator.language;
        document.getElementById("lang").innerHTML = language;
      </script>
    </body>
  </html>
  HEREDOC
  @w.show

end
test_lang

And - as far as I know- it is impossible to change. (Perhaps if you have Sketchup installed in other language than English it is different, but I never tested.)
That was the reason why I included some workaround in my previous post.

Some more here:
html - Is there any way to change input type=“date” format? - Stack Overflow

This page:
<input type="date"> - HTML: HyperText Markup Language | MDN

… shows how to use a pattern for a <input> of type text (which date types will degrade to in browsers that do not support the data type of <input> controls.)
Ie …

    <input type="text" name="birthday" required pattern="\d{2}-\d{2}-\d{4}" />

But you do not get the nifty calendar widget.