C#•2y ago

❔ Jquery UI Datepicker with ASP.NET MVC

God has this problem been a headache... I have this code, which is Creating a datepicker element.

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

@using ChartJSCore.Models;
@using ChartDataStructures;
@model UpToDate

@{
    ViewData["Title"] = "Index";

    Dictionary<string, List<Chart>> identifierToCharts = (Dictionary<string, List<Chart>>)ViewData["PatternToCharts"];
    ChartData firstData = identifierToCharts.Values.First().First().ChartData;
}
<h2>@firstData.symbol.ToUpper()</h2>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Date, new {
    @class = "datePicker",
    @Value = Model.Date.ToString("yyyy-MM-dd")
    })
}

@section DatePicker{
    <script type="text/javascript">
        $(function () {
            var dateString = "@Model.Date.ToString("yyyy-MM-dd")";
            var defaultDate = new Date(dateString);
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                defaultDate: defaultDate
            });
        });
    </script>
}

Heres the UpToDate model:

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

namespace ChartJSCore.Demo.Models
{
    public class UpToDate
    {
        public DateTime Date { get; set; }
    }
}

I am importing the relevant jquery scripts in my layout.cshtml file like so:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ChartJSCore.Demo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ChartJSCore.Demo.styles.css" asp-append-version="true" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    @await RenderSectionAsync("Head", required: false)
</head>
@RenderSection("DatePicker", required: true)

The output is attached. Basically, the date is displaying in the wrong format but displays correctly upon changing the date, and the datepicker itself clearly has messed up styling. What's even weirder is earlier I was having a different issue with the date, but the styling of the datepicker worked just fine, WITH THE EXACT SAME CODE. Please help ;-;

3 Replies

ExternalOP•2y ago

Please ping me if you respond. Thanks 🙂 Also getting this error in console after some time:

ExternalOP•2y ago

Accord•2y ago

Looks like nothing has happened here. I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Jquery UI Datepicker with ASP.NET MVC