从 HTML 表单的输入中获取修改后的文本

Question

我需要为酒店网站制作预订表格。它需要获取一些基本信息并将其发送到我的预订引擎。

我的问题是我的预订引擎需要以 mm/dd/yyyy 格式的文本接收任何日期。不幸的是，大多数欧洲用户不习惯这种格式，因为他们使用 dd/mm/yyyy。

所以，我需要用户在 dd/mm/yyyy 中写入并查看他们的输入信息，但预订引擎应该以 mm/dd/yyyy 的形式接收它。

这是我迄今为止尝试过的：

<form action="..." onsubmit="return ChangeDate()" id="resform" name="resform" target="_blank" method="get">

<input type="text" name="DateIn">
<input type="submit" value="Submit" />

</form>

<script type="text/javascript" language="javascript">

function ChangeDate() {
    var x = document.forms["resform"["DateIn"].value.split('/');
    return document.forms["resform"]["DateIn"].innerHTML = x[1]+'/'+x[0]+'/'+x[2];
    }
</script>

我不断得到 dd/mm/yyyy 格式。

Answer 1

最好使用：

<input type="date" id="dateIn"/>

除非你创建了一个JS函数来阻止他，否则用户可以在文本字段中输入他想要的任何内容。

另外，在chrome,edge,safari...中，浏览器的日期输入格式是mm/dd/yyyy，而Firefox浏览器是dd/mm/yyyy。

Answer 2

如果您要使用date 类型的输入字段，然后使用Intl.DateTimeFormat 类来格式化您的输出，您应该能够将其显示为一件事并将值作为另一件事发送。我对问题中的yyyyyy 以及预订引擎所期望的格式感到有些困惑，但希望这能让您深入了解如何实现目标。

const oForm=document.forms.resform;
const oDate=oForm.DateIn;
const oBttn=oForm.querySelector('[type="submit"]');


oBttn.addEventListener('click',e=>{
  if( oDate.value!='' ){
    const date=new Date( oDate.value );
    const opts={ year:'numeric', month:'2-digit', day:'2-digit' };
    const formatted=new Intl.DateTimeFormat( 'en-US', opts ).format( date );
    
    console.info( 'Formatted date value: %s',formatted ) 
 }
});

<form name='resform' target='_blank' method='get'>
    <input type='date' name='DateIn' />
    <input type='submit' />
</form>