[Solved] jQuery DatePicker not working in ASP.Net Core MVC

trisetia302
 
on Sep 18, 2021 06:57 AM
567 Views

Hi,

I'm use JQuery datepicker in my project but not working, in my same project JQuery datepicker used to another form it working. When I click on textboxt the datepicker not appears. I was tried to solve but I din't find the solution.

Any help could be apriciate.

The View

@model Klinik_Apps.Models.RawatModel

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/AdminDashboard/_Layout.cshtml";
}
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.js"></script>
<link href="~/lib/jquery-ui/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
    .ui-datepicker {
        z-index: 10000 !important;
    }
</style>
<script type="text/javascript" lang="javascript">
    ("#Tanggal").attr("ReadOnly", true)
    $("#Tgl_Rawat").datepicker(
        {
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy/mm/dd"
        });
</script>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header card-header-success">
                <h4 class="card-title">Add Rawat</h4>
                <p class="card-category"></p>
            </div>
            <div class="card-body">
                <form asp-action="Create" autocomplete="off">
                    <input asp-for="ID_Rawat" class="form-control" hidden="hidden" />
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="ID_Dokter" class="control-label"></label>
                                <input asp-for="ID_Dokter" class="form-control" />
                                <span asp-validation-for="ID_Dokter" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="ID_Pasien" class="control-label"></label>
                                <input asp-for="ID_Pasien" class="form-control" />
                                <span asp-validation-for="ID_Pasien" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Tgl_Rawat" class="control-label"></label>
                                <input type="text" id="Tgl_Rawat" name="Tgl_Rawat" class="form-control" />
                                <span asp-validation-for="Tgl_Rawat" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Kode_Penyakit" class="control-label"></label>
                                <input asp-for="Kode_Penyakit" class="form-control" />
                                <span asp-validation-for="Kode_Penyakit" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Keluhan_Pasien" class="control-label"></label>
                                <input asp-for="Keluhan_Pasien" class="form-control" />
                                <span asp-validation-for="Keluhan_Pasien" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Hasil_Diagnosa" class="control-label"></label>
                                <input asp-for="Hasil_Diagnosa" class="form-control" />
                                <span asp-validation-for="Hasil_Diagnosa" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Penatalaksanaan" class="control-label"></label>
                                <input asp-for="Penatalaksanaan" class="form-control" />
                                <span asp-validation-for="Penatalaksanaan" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Rumah_Sakit_Rujukan" class="control-label"></label>
                                <input asp-for="Rumah_Sakit_Rujukan" class="form-control" />
                                <span asp-validation-for="Rumah_Sakit_Rujukan" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div align="center">
                                <div class="form-group">
                                    <input type="submit" value="Create" class="btn btn-success" />
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div>
                    <a asp-action="Index"><i class="fa fa-arrow-alt-circle-left"> Back to List</i></a>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 18, 2021 07:25 AM

Check with below code.

<script type="text/javascript" lang="javascript">
    $(function(){
        $("[id*=Tanggal]").attr("ReadOnly", true)
        $("[id*=Tgl_Rawat]").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy/mm/dd"
        });
    });
</script>