默认情况下,输入type="date"显示日期为YYYY-MM-DD。
问题是,是否可能将其格式强制为:DD-MM-YYYY?
默认情况下,输入type="date"显示日期为YYYY-MM-DD。
问题是,是否可能将其格式强制为:DD-MM-YYYY?
当前回答
我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然,您可以使用自定义日期选择器。
其他回答
在阅读了大量的讨论之后,我准备了一个简单的解决方案,但我不想使用大量的Jquery和CSS,只是一些javascript。
HTML代码:
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
CSS代码:
#dt {
text-indent: -500px;
height: 25px;
width: 200px;
}
Javascript代码:
function mydate() {
//alert("");
document.getElementById("dt").hidden = false;
document.getElementById("ndt").hidden = true;
}
function mydate1() {
d = new Date(document.getElementById("dt").value);
dt = d.getDate();
mn = d.getMonth();
mn++;
yy = d.getFullYear();
document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
document.getElementById("ndt").hidden = false;
document.getElementById("dt").hidden = true;
}
输出:
我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然,您可以使用自定义日期选择器。
我调整了米格尔的代码,让它更容易理解 我想和像我一样有问题的人分享。
试试这个简单快捷的方法
$("#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>
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指向所需的控件。
如前所述,官方不可能更改格式。然而,它可以对字段设置样式,因此(在一点JS的帮助下)它以我们想要的格式显示日期。这样就失去了操作日期输入的一些可能性,但如果强制使用格式的愿望更强烈,那么这种解决方案可能是一种方法。日期字段只保持这样:
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
剩下的是一些CSS和JS: http://jsfiddle.net/g7mvaosL/
$("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format( this.getAttribute("data-date-format") ) ) }).trigger("change") input { position: relative; width: 150px; height: 20px; color: white; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
它在台式机的Chrome上运行得很好,在iOS上运行得很好(尤其可取,因为在触摸屏上的本机日期操纵器是无敌的)。没有检查其他的,但是不要期望在任何Webkit上失败。