Change datetime-local to DD-MM-YYYY hh:mm in HTML

Question

Hi im stucking change value on datetime-local format to DD-MM-YYYY hh:mm

I'm read and trial many similar question on here but still not work

Tried manipulating input or output value from datetime-local or text still same

Here is my goal:

Input Form => Text Value from Input => Copy Text Value Button

It's complete, but I need change date format from text to datetime-local for easy fill

OUTPUT NEED: DD-MM-YYYY hh:mm

<body onload=showData();>
  <form name="values" action="" method=POST onsubmit="javascript: return checkValues(this);">
    <script language="JavaScript" type="text/javascript">
      <!--
      function showData() {

        document.values.freetext.value =
          'Datetime : ' + document.values.start_date.value +
          ' until ' + document.values.end_date.value + ''

      }
      //-->
    </script>


    <table border="0" cellspacing="10" width="800" align="center">
      <tbody>
        <tr>
          <td>Start Date</td>
          <td>:</td>
          <td><input type="datetime-local" name="start_date" onchange=showData()>
          </td>
        </tr>
        <tr>
          <td>End Date</td>
          <td>:</td>
          <td><input type="datetime-local" name="end_date" id="dt" onchange=showData();>
          </td>
        </tr>


      </tbody>
    </table>



    <br /><br />
    <table border="0" cellspacing="10" width="800" align="center">
      <tbody>
        <tr>
          <td><textarea id="KIP" name="freetext" placeholder="KIP CRM" rows="8" cols="100" /></textarea><br/><br/>
            <button onclick="myFunction()" onmouseout="outFunc()">
      <span class="tooltiptext" id="myTooltip">Copy</span>
      </button></td>
          </button>
          </td>
        </tr>
      </tbody>
    </table>

    <script>
      function myFunction() {
        var copyText = document.getElementById("KIP");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        document.execCommand("copy");

        var tooltip = document.getElementById("KIP");
        tooltip.innerHTML = "Copied: " + copyText.value;


      }

      function outFunc() {
        var tooltip = document.getElementById("KIP");
        tooltip.innerHTML = "Copy to clipboard";
      }
    </script>

    <script>
      var now = new Date();
      now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
      document.getElementById('dt').value = now.toISOString().slice(0, 16);
    </script>

enter image description here

Thanks for helping

Does this answer your question? [How to change format of input type="datetime-local"?](https://stackoverflow.com/questions/58333728/how-to-change-format-of-input-type-datetime-local) — Heretic Monkey, Jun 07 '21 at 20:19
not yet, i already tried that and sucessfully change datetime format on input form, but on output value not changed — Zulfa Riza Yogatama, Jun 07 '21 at 20:26
Then parse the value you do get back as a date and format it as you want it. See [How to format a JavaScript date](https://stackoverflow.com/q/3552461/215552). — Heretic Monkey, Jun 07 '21 at 20:38
You might not want to rely on this type depending on what browsers you want to support on your site: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#browser_compatibility. Personally I prefer using a javascript library + css that adds a picker widget. There are many popular ones available and they offer a wider array of browser support than this input type. — Igor, Jun 07 '21 at 20:39
still not work, i think the wrong on function showData(), Can anyone help? — Zulfa Riza Yogatama, Jun 07 '21 at 21:18

Change datetime-local to DD-MM-YYYY hh:mm in HTML

0 Answers0