How can I change input field to Datepicker based on radio button selection? - asp.net-mvc

Question

I have an input field and it accepts strings inputted by the user. It looks for the string based on a radio button. Pic of Form
Basically I want that input field to turn into a date picker if the DOB or DOJ radio button is selected.
This is how my view looks like currently
<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>

Answer 1

Firstly, you should not use #Html.RadioButtonFor in that way. It will generate all the inputs with the same id. That would not be nice, as per specification ID-s should be unique.
Do it like this (give a different id for each input)
#Html.RadioButtonFor(model => model.radio, "FirstName", new { id = "FirstName" })
Secondly, you need to use JavaScript for what you want to achieve.
I am going with JQuery, but you can do it without it also. Use change method so you get the selected value for the radio button each time the user changes it. Then you can use .prop() to change the input type.
$('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');
}
});