locked
Jquery datepicker is not showing please help RRS feed

  • Question

  • User-1355965324 posted

    Here is my code. I have given my model, controller, view please help

    Model
    public class WeatherVM
        {
            public int LocationId { get; set; }
            public DateTime ForcastDate { get; set; }
            public WeatherLocation WeatherLocation;
            public IEnumerable<Weather> Weather { get; set; }
            public IEnumerable<SelectListItem> Locations { get; set; }
    
        }
    Controller
    
     public async Task<IActionResult> Index()
            {
                IEnumerable<WeatherLocation> locList = _unitOfWork.Location.GetAll();
    
                WeatherVM weatherVM = new WeatherVM()
                
                {
                    
                    Locations = locList.Select(i => new SelectListItem
                    {
                        Text = i.LocationName,
                        Value = i.LocationId.ToString()
                    })
                };
                weatherVM.ForcastDate= DateTime.Now;
    
                //var Weather = new List<Weather>();
                //var weatherList = await _weatherRepository.GetWeatherAsync();
    
                return View(weatherVM);
            }
    
    View
    
    @model myWeather.ViewModels.WeatherVM
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Forcast Weather </h1>
    <form asp-controller="Forcast" asp-action="Index" method="post">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2">
                    <label asp-for="Locations">Locations</label>
                </div>
                <div class="col-4">
                    @Html.DropDownListFor(m => m.WeatherLocation.LocationId, Model.Locations, "-Select a Category",
                    new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-2">
                <label asp-for="ForcastDate"></label>
            </div>
            <div class="col-4">
                <div class='input-group date' id='startDatePicker'>
                    <input type='text' id="forcastDate"  asp-for="ForcastDate" readonly class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <span asp-validation-for="ForcastDate" class="text-danger"></span>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            KeyHandler();
            $("#startDatePicker").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
    
        });
    
    
    
     
    
    
    </script>
    
    
    

    Layout

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - MetaWeather</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
    </head>
    
    
    
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script src="https://kit.fontawesome.com/e19c476714.js"></script>

    Thursday, June 4, 2020 9:32 AM

Answers

  • User711641945 posted

    Hi polachan,

    Change #startDatePicker to #forcastDate like below:

    $("#forcastDate").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
    

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 4, 2020 9:48 AM
  • User475983607 posted

    The datepicker must be applied to an input not a div.  

    polachan

    Rena when I run  , inspect mode the following error is coming 

    Forcast:102 Uncaught ReferenceError: $ is not defined. Something is wrong in Javascript calling . $(document).ready(function () { is not calling

    The error means jQuery is not referenced in your code.  Or you are trying to invoke jQuery before jQuery is loaded.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 4, 2020 9:58 AM

All replies

  • User711641945 posted

    Hi polachan,

    Change #startDatePicker to #forcastDate like below:

    $("#forcastDate").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
    

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 4, 2020 9:48 AM
  • User-1355965324 posted

    Rena when I run  , inspect mode the following error is coming 

    Forcast:102 Uncaught ReferenceError: $ is not defined. Something is wrong in Javascript calling . $(document).ready(function () { is not calling

    Thursday, June 4, 2020 9:53 AM
  • User475983607 posted

    The datepicker must be applied to an input not a div.  

    polachan

    Rena when I run  , inspect mode the following error is coming 

    Forcast:102 Uncaught ReferenceError: $ is not defined. Something is wrong in Javascript calling . $(document).ready(function () { is not calling

    The error means jQuery is not referenced in your code.  Or you are trying to invoke jQuery before jQuery is loaded.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 4, 2020 9:58 AM
  • User-1355965324 posted

    I  desperate still uncaught error is coming. Icorrected view . I have copied my view here

    Forcast:125 Uncaught ReferenceError: KeyHandler is not defined
    at HTMLDocument.<anonymous> (Forcast:125)
    at fire (jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
    at Function.ready (jquery-1.12.4.js:3582)
    at HTMLDocument.completed (jquery-1.12.4.js:3617)

    @model MetaWeather.ViewModels.WeatherVM
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Forcast Weather </h1>
    <form asp-controller="Forcast" asp-action="Index" method="post">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2">
                    <label asp-for="Locations">Locations</label>
                </div>
                <div class="col-4">
                    @Html.DropDownListFor(m => m.WeatherLocation.LocationId, Model.Locations, "-Select a Category",
                    new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-2">
                <label asp-for="ForcastDate"></label>
            </div>
            <div class="col-4">
            
                    <input type='text' id="forcastDate" asp-for="ForcastDate" readonly class="form-control" />
                    
                 
                <span asp-validation-for="ForcastDate" class="text-danger"></span>
            </div>
        </div>
    </form>
    @section Scripts{
        <script>
            alert("alkds");
            $(document).ready(function () {
                KeyHandler();
                $("#forcastDate").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
    
            });
        </script>
    }
    
    
    
    

    Thursday, June 4, 2020 10:03 AM
  • User475983607 posted

    The input is set to readonly.  So that's not going to work for obvious reasons.

    <input type='text' id="forcastDate" asp-for="ForcastDate" readonly class="form-control" />

    I suspect the error is coming from KeyHandler();  Here's the thing polachan; you have the code, the error, and ability to find the line of code that caused the error.  Often you can simply click the error in dev tools and the dev tools will go to the line that caused the error.  You can also use the debugger.   Please do a little basic troubleshooting to find the bug in your code.

    Thursday, June 4, 2020 10:21 AM
  • User-1355965324 posted

    sorted that many thanks

    Thursday, June 4, 2020 10:37 AM