Asp.net mvc 如何根据单选按钮选择将输入字段更改为日期选择器？

我有一个输入字段，它接受用户输入的字符串。它根据单选按钮查找字符串

基本上，如果选择了DOB或DOJ单选按钮，我希望输入字段变成日期选择器

这就是我的视图当前的样子

<div class="row">
    <div class="col-md-4">
        <form asp-action="Find">

            @Html.TextBoxFor(m => m.input)<br />
            @Html.RadioButtonFor(m => m.radio, "ID")<aspan>ID</aspan><br />
            @Html.RadioButtonFor(m => m.radio, "FirstName")<aspan>First Name</aspan><br />
            @Html.RadioButtonFor(m => m.radio, "LastName")<aspan>Last Name</aspan><br />

            @Html.RadioButtonFor(m => m.radio, "DOB")<aspan>DOB</aspan><br />

            @Html.RadioButtonFor(m => m.radio, "DOJ")<aspan>DOJ</aspan><br />
            @Html.RadioButtonFor(m => m.radio, "Phone")<aspan>Phone</aspan><br />
            @Html.RadioButtonFor(m => m.radio, "Email")<aspan>Email</aspan><br />
            <div class="form-group">
                <input type="submit" value="Find" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>
<div>

@Html.TextBoxFor（m=>m.input）

@Html.radiobutton（m=>m.radio，“ID”）ID

@Html.radioButton（m=>m.radio，“FirstName”）名字

@Html.radioButton（m=>m.radio，“LastName”）姓氏

@Html.radiobutton（m=>m.radio，“DOB”）DOB

@Html.radiobutton（m=>m.radio，“DOJ”）DOJ

@Html.radiobutton（m=>m.radio，“电话”）电话

@Html.radiobutton（m=>m.radio，“Email”）电子邮件

首先，您不应该以那种方式使用@Html.radiobutton。它将生成具有相同id的所有输入。这并不好，因为根据规范，id-s应该是唯一的

这样做（为每个输入提供不同的id）

其次，您需要使用JavaScript实现您想要实现的目标。 我将使用JQuery，但您也可以不用它。使用change method，以便在用户每次更改单选按钮时获得该按钮的选定值。然后可以使用.prop（）更改输入类型

$('input[name=radio]').change(function() {
    if (this.value=== 'DOB' || this.value=== 'DOJ') {
        $('input[name=input]').prop('type', 'date');
    } else {
        $('input[name=input]').prop('type', 'text');
    }
});

---

我想，您需要一些JavaScript逻辑来实现这个或ASP在这里为动态行为提供的任何东西。您遵循哪些指南或文档？它在哪里失败？如果没有任何提示，你已经尝试过的，我想你不会在这里得到答案。

$('input[name=radio]').change(function() {
    if (this.value=== 'DOB' || this.value=== 'DOJ') {
        $('input[name=input]').prop('type', 'date');
    } else {
        $('input[name=input]').prop('type', 'text');
    }
});