使用jQuery和Razor（c#）中的datepicker设置默认日期

我们有一个common.js文件，其中包含常用的与client/jquery相关的函数和验证。这个common.js包含在_Layout.cshtml中。在这个common.js文件中，我们有datepicker代码，以保持应用程序之间的一致性，如下所示

function OsDatepicker(id, date, maxdt, dDate) {
    var ctrl = "#" + id;
    var d = new Date();

    var currYear = d.getFullYear();
    if (date == 0)
        var yrrange = (parseInt(currYear) - 4) + ":" + (parseInt(currYear) + 2);
    else
        var yrrange = (parseInt(currYear) - 70) + ":" + (currYear);

    $(ctrl).datepicker({ dateFormat: 'dd/mm/yy',
        changeYear: true,
        autoSize: true,
        yearRange: yrrange,
        constrainInput: true,
        showOn: "both",
        buttonImage: '../../../Content/images/Calendar.png',
        buttonImageOnly: true,
        showanim: "slide",
        //defaultDate: dDate,  //not working  
        inline: true
    });

    if (maxdt == 0)
        $(ctrl).datepicker("option", "maxDate", "+0d");

    $(ctrl).datepicker("option","setDate", new Date(dDate)); //not working
}

$(document).ready(function () {
var dobDate = $("#Date_Of_Birth").val();
var jtDate = dobDate.split(" ");
OsDatepicker('Date_Of_Birth', 1, 0, jtDate[0]);
});

<input class="text-box single-line" id="Date_Of_Birth" name="Date_Of_Birth" type="text" value="13-10-1988 00:00:00" />

在cshtml脚本中调用上述函数，如下所示

function OsDatepicker(id, date, maxdt, dDate) {
    var ctrl = "#" + id;
    var d = new Date();

    var currYear = d.getFullYear();
    if (date == 0)
        var yrrange = (parseInt(currYear) - 4) + ":" + (parseInt(currYear) + 2);
    else
        var yrrange = (parseInt(currYear) - 70) + ":" + (currYear);

    $(ctrl).datepicker({ dateFormat: 'dd/mm/yy',
        changeYear: true,
        autoSize: true,
        yearRange: yrrange,
        constrainInput: true,
        showOn: "both",
        buttonImage: '../../../Content/images/Calendar.png',
        buttonImageOnly: true,
        showanim: "slide",
        //defaultDate: dDate,  //not working  
        inline: true
    });

    if (maxdt == 0)
        $(ctrl).datepicker("option", "maxDate", "+0d");

    $(ctrl).datepicker("option","setDate", new Date(dDate)); //not working
}

$(document).ready(function () {
var dobDate = $("#Date_Of_Birth").val();
var jtDate = dobDate.split(" ");
OsDatepicker('Date_Of_Birth', 1, 0, jtDate[0]);
});

<input class="text-box single-line" id="Date_Of_Birth" name="Date_Of_Birth" type="text" value="13-10-1988 00:00:00" />

我的剃须刀代码如下，为出生日期

<div style="width: 260px; float: left; height: 45px;">
    <label class="field_title">
        @Html.LabelFor(model => model.Date_Of_Birth)</label>
    <div class="form_input">
        @Html.EditorFor(model => model.Date_Of_Birth)
        @Html.ValidationMessageFor(model => model.Date_Of_Birth)
    </div>
</div>

@LabelFor（model=>model.Date出生日期）
@EditorFor（model=>model.Date出生日期）
@Html.ValidationMessageFor（model=>model.Date出生日期）

上面的标记如下：

function OsDatepicker(id, date, maxdt, dDate) {
    var ctrl = "#" + id;
    var d = new Date();

    var currYear = d.getFullYear();
    if (date == 0)
        var yrrange = (parseInt(currYear) - 4) + ":" + (parseInt(currYear) + 2);
    else
        var yrrange = (parseInt(currYear) - 70) + ":" + (currYear);

    $(ctrl).datepicker({ dateFormat: 'dd/mm/yy',
        changeYear: true,
        autoSize: true,
        yearRange: yrrange,
        constrainInput: true,
        showOn: "both",
        buttonImage: '../../../Content/images/Calendar.png',
        buttonImageOnly: true,
        showanim: "slide",
        //defaultDate: dDate,  //not working  
        inline: true
    });

    if (maxdt == 0)
        $(ctrl).datepicker("option", "maxDate", "+0d");

    $(ctrl).datepicker("option","setDate", new Date(dDate)); //not working
}

$(document).ready(function () {
var dobDate = $("#Date_Of_Birth").val();
var jtDate = dobDate.split(" ");
OsDatepicker('Date_Of_Birth', 1, 0, jtDate[0]);
});

<input class="text-box single-line" id="Date_Of_Birth" name="Date_Of_Birth" type="text" value="13-10-1988 00:00:00" />

正如您所看到的，模型正确地获取了日期，这也正确地传递给了OSDatepicker函数

加载表单时，DateofBirth文本框为空，无法对此进行破解。你的建议会有帮助的。提前感谢。

试试这个：

defaultDate: $("#Date_Of_Birth").val();

试试这个：

defaultDate: $("#Date_Of_Birth").val();

---

我认为这是因为razor呈现的日期格式与日期选择器期望的格式不匹配

---

您是否尝试过将

日期格式：“dd/mm/yy”

更改为

日期格式：“dd-mm-yyy”

？

我认为这是因为razor呈现的日期格式与日期选取器期望的格式不匹配

---

您是否尝试将

dateFormat:'dd/mm/yy'

更改为

dateFormat:'dd-mm-yyy'

？

如果禁用javascript，文本框是否有值？这将帮助我们解决Razor或JS的问题。另外-Razor输出日期的格式是什么？如果我禁用此控件的日期选择器，则日期显示为值，即13-10-1988 00:00:00。将

console.log（dDate）

放在

$（ctrl）的正上方。日期选择器({dateFormat:'dd/mm/yy'，

。你得到了什么？我有一种感觉，这可能是因为razor输出的日期与你初始化选择器的格式不同-尝试将dateFormat设置为'dd-mm-yyyy'（或者更新razor，将日期输出为dd/mm/yy）您是否尝试将

dateFormat:'dd/mm/yy'

更改为

dateFormat:'dd-mm-yyyy'

？如果禁用javascript，文本框是否有值？这将帮助我们找出问题出在Razor或JS上。此外-Razor输出日期的格式是什么？如果我禁用此控件的日期选择器，则日期显示为as的值，即13-10-1988 00:00:00。将

控制台.log（dDate）

放在

$（ctrl）的正上方。datepicker（{dateFormat:'dd/mm/yy'，

。您得到了什么？我有一种感觉，这可能是因为razor输出的日期格式与您初始化选择器的格式不同-尝试将dateFormat设置为'dd-mm-yyyy'（或者更新剃须刀，将日期输出为dd/MM/yy）您是否尝试将

dateFormat:'dd/MM/yy'

更改为

dateFormat:'dd-MM-yyyy'

？我认为defaultDate只是告诉jQueryUI在打开选择器时最初应该选择哪个日期。据我所知，问题在于文本框没有显示日期（甚至在选择器被打开之前）我认为defaultDate只是告诉jQueryUI当选择器被打开时最初应该选择哪个日期。据我所知，问题在于文本框没有显示日期（甚至在选择器被打开之前）…它不是“yyy”…而是“yy”…它不是“yyy”…而是“yy”