有什么办法可以改变输入类型 = 'date' 格式吗？-date-IT问答社区-解决你的IT疑问

有什么办法可以改变输入类型 = 'date' 格式吗？

Jonathan Hansen 1月前

默认情况下，输入类型 = \'date\' 显示日期为 YYYY-MM-DD。问题是，是否可以强制其格式为：DD-MM-YYYY？

默认情况下，输入 type="date" 显示日期为 YYYY-MM-DD .

问题是，是否可以强制其格式为类似于： DD-MM-YYYY ？

帖子版权声明 1、本帖标题：有什么办法可以改变输入类型 = 'date' 格式吗？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Jonathan Hansen在本站《date》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Wesley Jeftha 1月前 0 只看Ta

引用 2楼
我知道这是一篇旧帖子，但它是谷歌搜索中的第一个建议，简短的回答不是，推荐答案用户自定义日期输入器，我使用的正确答案是使用文本框来模拟日期输入并执行您想要的任何格式，这里是代码
```
<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>
```
1-请注意，此方法仅适用于支持日期类型的浏览器。

2- JS 代码中的第一个函数用于不支持日期类型并将外观设置为普通文本输入的浏览器。

3-如果您将在页面中使用此代码输入多个日期，请将函数调用和输入本身中的文本输入的 ID \'xTime\' 更改为其他内容，当然，请使用您想要用于表单提交的输入的名称。

4-在第二个函数中，您可以使用任何您想要的格式，而不是 day+\' / \'+month+\' / \'+year，例如 year+\' / \'+month+\' / \'+day，并在文本输入中使用占位符或值作为 yyyy / mm / dd，供用户在页面加载时使用。
jstuardo 1月前 0 只看Ta

引用 3楼

此代码片段与 jsfiddle 中提到的代码片段不同，这是在 JS 中使用 moment 库
lopass 1月前 0 只看Ta

引用 4楼
仅适用于 ISO 格式：
```
<input type="date" data-date="" data-date-format="YYYY-MM-DD" value="2023-12-20">
```
示例 jsfiddle
FlyingJay 1月前 0 只看Ta

引用 5楼
这是一个简单的紧凑解决方案（解决方法），没有任何库。

使用两个输入。真实/实际输入（隐藏）和外观（实际显示，但没有 \'name\' 属性，因此是假的）。
```
<div>
    <input name="date" id="actualDate" type="date" hidden onchange="dateFacade.value=datefacade(this.value)">     
    <input id="dateFacade" type="text" class="form-control" onclick="actualDate.showPicker()">       
</div>

<script>
    let datefacade = (inputDate) => (new Date(inputDate)).toLocaleDateString('en-UK',{dateStyle: 'full'});
</script>
```
工作原理：

当你点击外观时， 实际输入 器。当实际日期选择器发生变化时（因为你在日期选择器上选择了一个日期）， 外观输入 也会发生变化。

当然，使用你自己的 datefacade 函数。

（警告：它在 Codepen 中不起作用（由于 Codepen 限制）。将代码复制到实际 HTML 文件中，它应该可以正常工作。）
saksham 1月前 0 只看Ta

引用 6楼

您的答案可以通过添加额外的支持信息来改进。请编辑以添加更多详细信息，例如引文或文档，以便其他人可以确认您的答案是否正确。您可以在帮助中心找到有关如何撰写良好答案的更多信息。
Gareth 1月前 0 只看Ta

引用 7楼
const birthday = document.getElementById("birthday"); const button = document.getElementById("wishBtn"); button.addEventListener("click", () => { let dateValue = birthday.value; // Changing format :) dateValue = dateValue.split('-').reverse().join('-'); alert(`Happy birthday king/Queen of ${dateValue}`); });

<input type="date" id="birthday" name="birthday" value="2022-10-10"/> <button id="wishBtn">Clik Me</button>
Michael M 1月前 0 只看Ta

引用 8楼
不，确实不是。

容易被黑客入侵但非常精简且可定制的解决方案是：
1. 隐藏日期输入（CSS 可见性：隐藏）（仍然显示日历弹出窗口）
2. 在其上方放置一个文本输入框
3. 在文本输入单击时，使用 JS 获取日期输入元素并调用 .showPicker()
4. 将日期选择器值存储在其他地方
5. 在文本输入中以您想要的自定义格式显示值
以下是一些示例反应代码：
```
               <div style={{ width: "100%", position: "relative" }}>
                    <input type="date" className={`form-control ${props.filters[dateFromAccessor] ? '' : 'bh-hasNoValue'}`} id={`${accessor}-date-from`} placeholder='from'
                        value={toDate(props.filters[dateFromAccessor])} style={{ marginRight: 0, visibility: "hidden" }}
                        onChange={e => {
                            props.setFilters({ ...props.filters, [dateFromAccessor]: inputsValueToNumber(e) })
                        }} />
                    <input type="text" className="form-control" readOnly
                        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "white" }}
                        value={toDate(props.filters[dateFromAccessor])}
                        onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        (document.getElementById(`${accessor}-date-from`) as any)?.showPicker();
                    }}></input>
                </div>
```

Frak 1月前 0 只看Ta

9楼

感谢 @safi eddine 和 @Hezbullah Shah

带有 VanillaJS 和 CSS 的日期选择器。

CSS 样式：

/*================== || Date Picker ||=======================================================================================*/

/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
    color: transparent;    
}




/*------- DatePicker ------------------------*/
input[type="date"] {
    background-color: aqua;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    font-weight: 900;
}





/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus 
{
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}






input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: #fff;
    position: relative;    
}



    /*------- Year ------------------------*/
    input[type="date"]::-webkit-datetime-edit-year-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 56px;
    }


    /*------- Month ------------------------*/
    input[type="date"]::-webkit-datetime-edit-month-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 26px;
    }



    /*------- Day ------------------------*/
    input[type="date"]::-webkit-datetime-edit-day-field {
        position: absolute !important;
        color: #000;
        padding: 2px;
        left: 4px;
    }

JavaScript：

 // ================================ || Format Date Picker || ===========================================================
    function GetFormatedDate(datePickerID)
    {
        let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
        return rawDate.split('-').reverse().join("-"); // Reverse the date
    }

使用：

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID

qg_java_17137 1月前 0 只看Ta

引用 10楼
Angular 开发人员（也许还有其他人）可以考虑这个部分解决方案。

我的策略是检测输入字段的焦点状态，并相应地在日期和文本类型之间切换。明显的缺点是输入焦点时日期格式会发生变化。

它并不完美，但可以确保相当程度的一致性，特别是当您在 Web 应用中以文本形式显示一些日期并且还有一些日期输入时。如果您只有一个日期输入，它不会有太大帮助。
```
<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">
```
并 myInputFocus = false 在组件类的开头简单声明。明显指向 myDate 您想要的控制。
Alexis Wilke 1月前 0 只看Ta

引用 11楼

似乎是一个有点奇怪（有缺陷？）的设置功能。我的浏览器和 Windows 都是英语（英国），而我的区域设置为荷兰语。没有选择荷兰语格式的选项。如果我将浏览器更改为荷兰语，那么我得到的设置将与荷兰语格式同步（虽然这无关紧要，因为格式已经正确）。如果我将其更改为西班牙语，则设置将再次被删除。
what 1月前 0 只看Ta

引用 12楼

我使用的是普通版 Firefox 93.0，该选项位于语言部分。每当浏览器语言与 Windows 区域和语言设置匹配时，该选项是否会被隐藏？我的 Windows 和 Firefox 都是英文版，但 Windows 语言环境设置为西班牙语（阿根廷）。
shaoyihe 1月前 0 只看Ta

引用 13楼

我在 Firefox v93.0 中找不到此设置。这是常规 Firefox 的设置吗？还是可能是开发者版的一部分？
NoNameLittle 1月前 0 只看Ta

引用 14楼

Firefox 中的新功能（自未知版本起），在 Settings > Language 添加了一个选项： 使用操作系统设置的“西班牙语（西班牙）”来格式化日期、时间、数字和测量值

此选项将使用操作系统的语言环境来显示日期！可惜它默认不启用（也许从全新安装开始启用？）
Indra 1月前 0 只看Ta

引用 15楼
的代码 Miguel 以使其更容易理解，并想与遇到和我一样问题的人分享。

尝试这个简单快捷的方法
$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); }); function displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: "absolute", left: "10px", top: "3px", width: $(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // this pattern dd/mm/yyyy // you can set pattern you need let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`; return dstring; }

.date-selector { position: relative; } .date-selector>input[type=date] { text-indent: -500px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="date-selector"> <input id="datePicker" class="form-control" type="date" onkeydown="return false" /> <span id="datePickerLbl" style="pointer-events: none;"></span> </div>
Lis 1月前 0 只看Ta

引用 16楼

这并没有解决所提出的问题；你在这里解析的是自定义格式，而不是更改用来显示价值。
Vikas Naranje 1月前 0 只看Ta

引用 17楼
由于该帖子是两个月前发布的，所以我也想提供我的意见。

就我而言，我从读卡器接收日期，其格式为 dd/mm/yyyy。

我做什么。例如
var d="16/09/2019" // date received from card function filldate(){ document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-"); }

<input type="date" id="cardexpirydate"> <br /><br /> <input type="button" value="fill the date" onclick="filldate();">
代码的作用：
1. 它根据 \'/\' 将我获得的日期拆分为 dd/mm/yyyy（使用 split()）并创建一个数组，
2. 然后它反转数组（使用 reverse()），因为日期输入支持我得到的结果的反转。
3. 然后它根据输入字段所需的格式将数组连接到字符串（使用 join()）
所有这些都在一行中完成。

我认为这会对某些人有所帮助所以我写了这个。
Paul W 1月前 0 只看Ta

引用 18楼

无法更改 web-kit 浏览器使用的用户计算机或手机默认日期格式。但如果您可以使用 jquery 和 jquery UI，则有一个可设计的日期选择器，可以根据开发人员想要的任何格式显示。jquery UI 日期选择器的链接在此页面上 http://jqueryui.com/datepicker/ 您可以找到演示以及代码和文档或文档链接

编辑：-我发现 chrome 使用的语言设置默认等于系统设置，但用户可以更改它们，但开发人员不能强迫用户这样做，所以你必须使用其他 js 解决方案，就像我告诉你的，你可以使用 javascript date-pickers 或 jquery date-picker 等查询在网络上搜索
Anjani Sathe 1月前 0 只看Ta

引用 19楼

+1 太棒了！使用：LANG=ja_JP.UTF-8 chromium-browser 对我来说很管用。它也可以与 Vivaldi 配合使用，我想其他浏览器也可以。谢谢！
Malik A. Rumi 1月前 0 只看Ta

引用 20楼
如上所述， <input type=date ... > 大多数浏览器尚未完全实现，因此我们来讨论一下类似 webkit 的浏览器（chrome）。

使用 linux，您可以通过改变环境变量来改变它，但 LANG , LC_TIME 似乎不起作用（至少对我来说）。

您可以 locale 在终端中输入内容来查看当前值。我认为同样的概念可以应用于 IOS。

例如：使用：
```
LANG=en_US.UTF-8 /opt/google/chrome/chrome
```
日期显示为 mm/dd/yyyy

使用：
```
LANG=pt_BR /opt/google/chrome/chrome
```
日期显示为 dd/mm/yyyy

您可以使用 http://lh.2xlibre.net/locale/pt_BR/ （ pt_BR 根据您的地区更改）创建您自己的自定义地区并根据需要格式化您的日期。

关于如何更改默认系统日期的更高级参考是： https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ 和 https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

您可以使用以下方式查看真实的当前日期格式 date ：
```
$ date +%x
01-06-2015
```
但是由于 LC_TIME 和 d_fmt 似乎被 chrome 拒绝（我认为这是 webkit 或 chrome 的一个错误），所以很遗憾 它不起作用 。:'(

因此，不幸的是，答案是，如果 LANG 环境变量不能解决你的问题，那么目前还没有办法。