我正在尝试将默认日期格式更改为DD / MM / YYYY。我已经成功做到了。但是显示无效日期。选择日期后,效果很好。但是,当我清除日期时,它会显示无效日期。如何删除此错误消息。
$("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: black;
}
input:before {
position: absolute;
top: 5px; left: 6px;
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: 16px;
right: 0;
color: black;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input type="date" data-date="" placeholder="s" data-date-format="DD/MM/YYYY" name="tckt_issue_date">
答案 0 :(得分:1)
更新后的答案
收到无效日期错误的原因是,当您清除日期时,输入会将空日期传递给jQuery函数。将值提供给moment()
时,由于期望有效的日期,将返回错误。
因此,您需要测试一个空值。
工作代码:
$('#datePicker').on('change', function() {
if(this.value){
$(this).attr('data-date', moment(this.value, 'YYYY-MM-DD').format($(this).attr('data-dateformat')));
} else{
$(this).attr('data-date', '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input id="datePicker" type="date" data-date="" placeholder="s" data-dateformat="DD/MM/YYYY" name="tckt_issue_date">
此代码还可以正确更新html中的data-date属性。
答案 1 :(得分:0)
This is already answered here you can can check.
您都可以通过jQuery或Javascript更改格式。
-
替换为/
.attr(value, your-value);
答案 2 :(得分:0)
这是将输入字段日期格式更改为DD / MM / YYYY的方法
$("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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" data-date="" required placeholder="s" data-date-format="DD/MM/YYYY" value="2015-08-09" name="tckt_issue_date">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>