CODEWITHSUNDEEP
jqueryasp.net-coremodel-view-controllerjquery-ui-datepicker
DVLanleyC
DVLanleyC

Reputation: 153

How to use datepicker on MVC Core in ASP form

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.

Upvotes: 6

Views: 24668

Answers (4)

Larry Cummins
Larry Cummins

Reputation: 119

If you need to select the year as well as the month and date you can use this.

 @section Scripts{
                        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
                        <link rel="stylesheet" href="/resources/demos/style.css">
                        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
                        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
                        <script>
                            $(function () {
                                $("#datepicker").datepicker({
                                    changeMonth: true,
                                    changeYear: true,
                                    yearRange: "-100:+0",
                                });
                            });
                        </script>
                    }

Upvotes: 0

Rena
Rena

Reputation: 36655

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://learn.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

Upvotes: 8

Rohan Rao
Rohan Rao

Reputation: 2603

The thing the #datepicker points out the id of textbox to which datepicker functionality is to be added, and I cannot see this id on your textbox anywhere. That's why it is not working.

Also no need to set the value to the textbox because after you select the date it will automatically set the selected date to textbox.

Note: Please run the Code Snippet

$(function() {
  $("#datepicker").datepicker();
});
<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>

<div class="form-group">
  <label asp-for="RegisterDate" class="control-label"></label>
  <input asp-for="RegisterDate" id="datepicker" class="form-control" placeholder="select date" />
  <span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>

Upvotes: 0

Denis Stukalov
Denis Stukalov

Reputation: 1242

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>

Upvotes: 1

Related Questions