How to use datepicker on MVC Core in ASP form

13,405

Solution 1

For asp.net core,If you use the default MVC template and you do not disable the Layout,you need to add @section Scripts{}.

Reference:

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1#sections

Also be sure that the type of input should be text to avoid Html5 default datepicker:

<div class="form-group">
    <label asp-for="RegisterDate" class="control-label"></label>
    <input asp-for="RegisterDate" id="datepicker" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
    <span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>
}

Result(I used Google Chrome):

enter image description here

Update:

If you want to use datetimepicker,here is a working demo like below:

@model Test
<div class="form-group">
    <label asp-for="RegisterDate" class="control-label"></label>
    <div class='input-group date' id='datepicker'>
        <input asp-for="RegisterDate" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    <span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>

@section Scripts
    {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <script>
        $(function () {
            $('#datepicker').datetimepicker();
        });
    </script>
}

Result: enter image description here

Solution 2

You need add datepicker id to input field:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#datepicker" ).datepicker();
} );
</script>
...
        <div class="form-group">
            <label asp-for="RegisterDate" class="control-label"></label>
            <input asp-for="RegisterDate" id="datepicker" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")"/>
            <span asp-validation-for="RegistertDate" class="text-danger"></span>
        </div>
Share:
13,405

Related videos on Youtube

DVLanleyC
Author by

DVLanleyC

Updated on June 04, 2022

Comments

  • DVLanleyC
    DVLanleyC almost 2 years

    In my MVC core web application I dont see a datepicker on all browsers so I would like to use the jQuery datepicker.

    Currently in my Model I have :

        [Required]
        [Display(Name = "RegisterDate")]
        //[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd hh:mm:ss}")]
        public override DateTime RegisterDate { get; set; }
    

    In the .html file I have : (these are just some pieces of code)

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
      $( "#datepicker" ).datepicker();
    } );
    </script>
    ...
                <div class="form-group">
                <label asp-for="RegisterDate" class="control-label"></label>
                <input asp-for="RegisterDate" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
                <span asp-validation-for="RegistertDate" class="text-danger"></span>
            </div>
    

    My question is how do I get the jquery datepicker to work on this? I do not want to download any NuGet packages because of some dependencies on the project. I prefer to work with CDN.

    Thanks in advance for the help.

  • DVLanleyC
    DVLanleyC almost 4 years
    Hi, I have followed your instructions but it still doesnt work.
  • DVLanleyC
    DVLanleyC almost 4 years
    Hi, thanks alot. I got this working. I now realise to add the times aswell. So I think it is more like a datetimepicker. Any idea how to make it to a datetimepicker?