jQuery UI DatePicker does not set the value of TextBoxFor

Question

I've added jQueryUI DatePicker on HtmlTextBoxFor in my MVC application. Below is my code. Now when I debug, The date shows 01/01/2001 12:00:00 in the create event instead of the date selected.

<!-- JoinDate -->
<div class="form-group">
    <div class="editor-label">
        @Html.LabelFor(model => model.JoinDate, new { @class = "col-sm-2 control-label" })
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.JoinDate, new { @class = "form-control", @id = "datepicker" })
    @Html.ValidationMessageFor(model => model.JoinDate)
</div>

<script src="~/Content/js/jquery.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

<script>
$(function () {
    $("#datepicker").datepicker();
});

You 've referenced jQuery-ui twice, you need to remove either one of the reference. I suggest remove <script src="~/Scripts/jquery-ui-1.11.4.js"></script> — Irshu
– Irshu, Commented Apr 27, 2016 at 2:09
What if you declare it like: $(function () { $("#datepicker").datepicker({defaultDate: ''}); }); — Irshu
– Irshu, Commented Apr 27, 2016 at 2:17
What is the value of JoinDate when you pass the model to the view? — user3559349
– user3559349, Commented Apr 27, 2016 at 3:39

DhavalR · Accepted Answer · 2016-04-27 03:39:28Z

0

Well I found a solution to this. I added an input and assign it jQueryUI datepicker. Now onSelect event, it just set the value to the TextBoxfor. See the code below.

<script>
$(function () {
    $("#datepicker").datepicker();
});

<script>
$('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd-mm-yy",
    constrainInput: true,
    defaultDate: new Date(1975, 1 - 1, 1),
    yearRange: "2000:2025",
    onSelect: function () {
        alert($('#datepicker').val());
        $('#joindate').val($('#datepicker').val());
    }
});
</script>

<!-- JoinDate -->
                        <div class="form-group">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.JoinDate, new { @class = "col-sm-2 control-label" })
                            </div>
                            <div class="editor-field">
                                <input type="text" id="datepicker" onchange="onDateChange()"/>
                                @Html.TextBoxFor(model => model.JoinDate, new { @class = "form-control", @id="joindate" })
                                @Html.ValidationMessageFor(model => model.JoinDate)
                            </div>
                        </div>

answered Apr 27, 2016 at 3:39

DhavalR

1,4174 gold badges31 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3559349 Over a year ago

There is no reason to use defaultDate: - If the value of property JoinDate is set in the controller before you pass the model to the view, then that value will be displayed.

DhavalR Over a year ago

Actually this controller is to create. When I use it in View, I would not need datepicker.

user3559349 Over a year ago

That makes no sense. Why are you asking a question about something that's not needed? And why are you using new { id="joindate" } - the id is already id="JoinDate"

DhavalR Over a year ago

Thanks for the second advice. I actually did not know that. For the first thing you said, I know people here don't ask anything that is not needed. I need to implement datepicker for Create controller. In View details, I just show the date in Textboxfor. No need to change it in View.

Collectives™ on Stack Overflow

jQuery UI DatePicker does not set the value of TextBoxFor

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related