I have implemented a bootstrap date picker in MVC5 on my registration page. I have used below article :
It's working fine when running on simple view page without any other JS or any css but not working on my actual Registration page. It showing me an error as on JS function of Calendar on Page load on line:
$('#yatri_DOBtxt').datepicker({
Uncaught TypeError: $(...).datepicker is not a function
below is my page code:
@ModelType amarnathShrineapp.Register
@Code
ViewData("Title") = "Create"
End Code
@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@<div class="form-horizontal">
<h4>Registration For Yatra Parchi</h4>
<hr />
@Html.ValidationSummary(True, "", New With {.class = "text-danger"})
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="glyphicon glyphicon-user"></i> <strong>Yatri Details</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
@*@Html.LabelFor(Function(model) model.yatri_dob, htmlAttributes:=New With {.class = "control-label col-md-4"})*@
<label class="control-label">Date of Birth: <font color="red">*</font></label>
@Html.TextBox("yatri_DOBtxt", Model.yatri_dob, New With {.class = "form-control", .value = ""})
@*@Html.EditorFor(Function(model) model.yatri_dob, New With {.htmlAttributes = New With {.class = "form-control", .autocomplete = "off", .value = ""}})*@
@Html.ValidationMessageFor(Function(model) model.yatri_dob, "", New With {.class = "text-danger"})
</div>
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap DatePicker -->
<script type="text/javascript">
$(function () {
$('#yatri_DOBtxt').datepicker({
changeMonth: true,
changeYear: true,
format: "dd/mm/yyyy",
language: "tr"
});
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="glyphicon glyphicon-heart"></i> Yatri Medical Details</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">Hospital: <font color="red">*</font></label>
@Html.DropDownList("ddlHospital", New List(Of SelectListItem) From
{
New SelectListItem With {.Text = "H1", .Value = "1"},
New SelectListItem With {.Text = "H2", .Value = "2"},
New SelectListItem With {.Text = "H3", .Value = "3"}
}, "-- Select Hospital --", htmlAttributes:=New With {.class = "form-control"})
@Html.ValidationMessageFor(Function(model) model.med_issu_hospital, "", New With {.class = "text-danger"})
</div>
<div class="col-xs-3">
<label class="control-label">Authority: <font color="red">*</font></label><br />
@Html.EditorFor(Function(model) model.med_issu_authority, New With {.htmlAttributes = New With {.class = "form-control", .autocomplete = "off"}})
@Html.ValidationMessageFor(Function(model) model.med_issu_authority, "", New With {.class = "text-danger"})
</div>
<div class="col-xs-3">
<label class="control-label">State: <font color="red">*</font></label>
@Html.DropDownListFor(Function(model) model.mStateId, Model.mStates, "Please select", htmlAttributes:=New With {.class = "form-control"})
@Html.ValidationMessageFor(Function(model) model.med_issu_state, "", New With {.class = "text-danger"})
</div>
<div class="col-xs-3">
<label class="control-label">District: <font color="red">*</font></label>
@Html.DropDownListFor(Function(model) model.mDistrictId, Model.mDistrict, "Please select", htmlAttributes:=New With {.class = "form-control"})
@Html.ValidationMessageFor(Function(model) model.med_issu_district, "", New With {.class = "text-danger"})
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
@* For Photo Upload *@
<script type="text/javascript">
$(document).ready(function () {
$('#photoFileupload1').bind('change', function () {
//alert("Hello");
});
//Image Preview Function
function readURL(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#dvPreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
});
</script>
@* For PDF Upload *@
<script type="text/javascript">
$(document).ready(function () {
//debugger;
$('#medicalFileupload1').bind('change', function () {
});
//Image Preview Function
function readURL(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#dvPreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
});
</script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="0">Please select</option>');
}
function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
} //});
</script>
</div>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</div>
End Using
