在 <input /> 日期中写入非日期类型

Question

使用 Datepicker for Bootstrap v1.9.0

我需要按年select周（格式为WW/YYYY），我有以下代码：

html

<div class="form-group col-12">
    <label asp-for="EngineeringChange.FinishedGood.Week">Semana</label>
    <input type="text" id="weeklyDatePicker" class="form-control" placeholder="Select Week" />
    <input asp-for="EngineeringChange.FinishedGood.Week" class="form-control weeklyDatePicker" placeholder="Select Week" type="hidden" />
    <span asp-validation-for="EngineeringChange.FinishedGood.Week" class="text-danger"></span>
</div>

jquery

$(document).ready(function () {
    moment.locale('en', {
        week: { dow: 0, doy: 0 }
        // Sunday is the first day of the week
    });

    //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your own)
    $("#weeklyDatePicker").datepicker({
        format: 'MM-DD-YYYY'
    });

    //Get the value of Start and End of Week
    $('#weeklyDatePicker').on('changeDate', function (e) {

        var week = moment(e.date, "MM-DD-YYYY").week();
        var year = moment(e.date, "MM-DD-YYYY").year();
        var end = week + '/' + year;
        $("#weeklyDatePicker").val(end);
        console.log(end + "AFTER: " + $("#weeklyDatePicker").val());
    });
});

我可以这样工作：但是一旦我关闭选择器，它就会自动更改为：

我认为这是因为 #weeklyDatePicker 是日期类型，但解决方法是什么？

Answer 1

添加选项 forceParse:false 将停止转换。

$("#weeklyDatePicker").datepicker({
    ...
    forceParse: false,
});

PS: 在旁注中，我觉得奇怪的是，如果我将代码更改为（在 forceParse:false 更改之前）：

$('#weeklyDatePicker').on('changeDate', function (e) {

    console.log("BEFORE" + $(".weeklyDatePicker").val());

    var week = moment(e.date, "MM-DD-YYYY").week();
    var year = moment(e.date, "MM-DD-YYYY").year();
    var end = week + '/' + year;
    $("#weeklyDatePicker").val("" + end);

    console.log(end + "AFTER: " + $("#weeklyDatePicker").val());

});

BEFORE和AFTER打印会正确，但显示不正确。这意味着如果我每周 select 并关闭数据选择器，它会无意中更改为 dd/mm/yyyy 格式，但是当我再次打开它时 BEFORE 打印将显示正确的值（ww/yyyy ), 这意味着输入的值确实是我想要的，但由于某种原因它改变了它的显示。

在 <input /> 日期中写入非日期类型

Writing a non-date type in an <input /> date

html

bootstrap-datepicker