I have the following calls in my View that should let me open the Calendar and select a date, I'm not sure I understand how to implement Datepicker.
<script>
$(document).ready(function () {
$(".datepicker").datepicker();
});
</script>
<li class="input-group-addon">
<label><%= CRAWebSiteMVC.Properties.Resources.EndDate %> :</label>
<input type="text" class="datepicker" placeholder="Click me!">
</li>
I have installed bootstrap datepicker on the NuGet, what am I missing or not understanding?
Use this for initizalis your Datepicker:
<script type="text/javascript">
$(function () {
$('#date').datepicker({
format: 'dd.mm.yyyy',
weekStart: 1,
clearBtn: true,
language: 'de-DE',
autoclose: true,
forceParse: false,
calendarWeeks: true
});
});
</script>
<li class="input-group-addon">
<label><%= CRAWebSiteMVC.Properties.Resources.EndDate %> :</label>
<input id="date" type="text" class="datepicker" placeholder="Click me!">
</li>
For more formatting see bootstrap-datepicker sandbox you will also find an example of the implementation
this is how you implement bootstrap datepicker in html page link
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
how to test if bootstrap 3 is loaded or not link
// Will be true if bootstrap 3 is loaded, false if bootstrap 2 or no bootstrap
var bootstrap3_enabled = (typeof $().emulateTransitionEnd == 'function');
Related
I have a form where I want the date to default to today's date.
<div class="form-group">
<label asp-for="ThrDate" class="control-label"></label>
<input asp-for="ThrDate" class="form-control" value="#DateTime.Now"
type="date" asp-format="{0:yyyy-MM-dd HH:mm}" />
<span asp-validation-for="ThrDate" class="text-danger"></span>
</div>
My research would suggest that this would work, but the value is not actually passing through. Oh, and I still want the date picker to work.
Thanks!
You can try the following code:
<div class="form-group">
<label asp-for="ThrDate" class="control-label"></label>
<input asp-for="ThrDate" class="form-control" id="date_info" type="date" asp-format="{0:yyyy-MM-dd}" />
<span asp-validation-for="ThrDate" class="text-danger"></span>
</div>
#section Scripts{
<script>
$(document).ready(function () {
var time = new Date();
var day = ("0" + time.getDate()).slice(-2);
var month = ("0" + (time.getMonth() + 1)).slice(-2);
var today = time.getFullYear() + "-" + (month) + "-" + (day);
$('#date_info').val(today);
})
</script>
}
Result:
And if you want use datetimepicker,you can use following code:
<div class="form-group">
<label asp-for="ThrDate" class="control-label"></label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input class="form-control datetimepicker-input" asp-for="ThrDate" type="text" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
#section Scripts{
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script>
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
defaultDate: new Date(),
});
</script>
}
Result:
And another post gives us the answer:
Set default input value Datetime.Now on create view MVC ASP.NET Core 2?
but it's in the comments, so I will detail here.
In the controller, in the GET, set the value of the model item, such like:
PostThr postThr = new PostThr { ThrDate = DateTime.Now };
return view(model);
once you do this, the value assigned in the controller passes to the view. No modification to the view is necessary.
Side note: I seem to now have trouble with the formatting of the value, but that's rich world problems, or another question.
Shout out to Stephen Muecke!
I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>
recently I tried to use Bootstrap DateTimePicker in my ASP.NET MVC project, and the calendar just wont show up. I believe I already put the Scripts and CSS in the right order.
Here is my CSS and Scripts :
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/moment.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
#RenderSection("Scripts", required: false)
And this is my View Page :
<div class="col-md-3">
<div class="form-group">
<label>Tanggal Survey </label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
#section Scripts{
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD MMMM YYYY'
});
});
</script>
}
And when I click the input, it just show the date and never show the pop-up calendar,
here is the example
Check the examples here: minimum setup
For your datepicked to open with clicking on the input you need to remove the glyph and go with the minimum setup.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
</div>
Otherwise you can do this:
$(function() {
$('.datetimepicker').datetimepicker();
$('.datetimepicker-addon').on('click', function() {
$(this).prev('input.datetimepicker').data('DateTimePicker').toggle();
});
});
Bootstrap Modal will not load. It should load as soon as the View is rendered.
I've used this method of adding javascript through a section decleration to load a modal form in the same project. So, I know the jquery and bootstrap libraries that are included in the master pages are compatible. I just cannot figure out why this time around, the modal is not loading.
Browser console is not complaining about anything
My View
#using CaptchaMvc.HtmlHelpers
#{
ViewBag.Title = "Report Post";
}
<div class="modal fade" id="ReportReasonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<div class="modal-content">
<div class="modal-header text-center" style="background-color:saddlebrown; color:white;">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Report Posting</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="/Items/Process Report">
<div class="modal-body">
#Html.ValidationSummary("", new { #class = "text-danger" })
</div>
<div class="modal-footer">
#* #Html.Captcha("Refresh", "Please Enter Captcha Value Below", 7, "Is required field.", false)*#
<button value="submit" type="submit" class="btn btn-outline-danger">Submit</button>
</div>
</form>
</div>
</div>
</div>
#section scripts
{
<script>
$(function () {
$("ReportReasonModal").modal();
alert("here")
});
</script>
}
Order of javascript loaded: excerpt from rendered masterpage with the scripts section rendered
<!-- jQuery library -->
<script src="/Scripts/jquery-3.3.1.js"></script>
<!-- Popper -->
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/mdb/mdb.js"></script>
<script>
$(function () {
$("ReportReasonModal").modal();
alert("here")
});
</script>
The modal should appear as soon as the view is rendered
You are not using the correct jQuery selector. The # is missing, to select an element with the id of ReportReasonModal. What you are currently trying to do is select an element of type <ReportReasonModal />
$("#ReportReasonModal").modal();
I have created a very simple DatePicker using .NET Core. Here is my model:
public class MemberViewModel
{
public string Name { get; set; }
[DisplayFormat(DataFormatString = #"{0:dd\/MM\/yyyy}", ApplyFormatInEditMode = true)]
public DateTime DOB { get; set; }
}
Here is my View:
#model DatePicker.Models.MemberViewModel
#{
ViewData["Title"] = "MemberView";
}
<h2>MemberView</h2>
<h4>MemberViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="MemberView">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DOB" class="control-label"></label>
#Html.TextBox("datepicker")
#*<input asp-for="DOB" class="form-control" />
<span asp-validation-for="DOB" class="text-danger"></span>*#
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Here is my Layout:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<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({ minDate: -20, maxDate: "+1M +10D", dateFormat: "dd/mm/yy" });
});
</script>
The DatePicker does nothing when I click on the textbox (in all browsers). The strange thing is; if I copy and paste the HTML generated into a HTML file and then double click on the HTML file, then the DatePicker works as expected. What is the problem?
Update
Please see the HTML generated below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<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({ minDate: -20, maxDate: "+1M +10D", dateFormat: "dd/mm/yy" });
});
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MemberView - DatePicker Hotla</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">DatePicker</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
<h2>MemberView</h2>
<h4>MemberViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form action="/Home/MemberView" method="post">
<div class="form-group">
<label class="control-label" for="Name">Name</label>
<input class="form-control" type="text" id="Name" name="Name" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="DOB">DOB1</label>
<input id="datepicker" name="datepicker" type="text" value="" />
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8AZxPMp7tE9EgVGFaTl7fvF-ALxvEVCrHkYj_isQTt5HUG2iu3EPMhNjR_6OlI2xtybr9grj4e4c3eFwe5jY-8r5YWeWIdtSNkc5IsvYnt9JYc5ftpPSzAqzINzih1yg85DFHJLEkWRZ2EjvupuQQ5E" /></form>
</div>
</div>
<div>
Back to List
</div>
<hr />
<footer>
<p>© 2018 - DatePicker</p>
</footer>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</body>
</html>
If I comment out the following line, then it works as expected:
<script src="/lib/jquery/dist/jquery.js"></script>
You are including jQuery twice. The second jQuery inclusion overwrites your $ variable, removing the jQuery ui plugins you loaded beforehand.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
and
<script src="/lib/jquery/dist/jquery.js"></script>
jQuery plugins work by extending the $ variable. You second inclusion of jQuery destroys the plugins previously loaded.