I am trying to integrate a date picker into my form over the existing code.
What I have at the moment is:
#Html.EditorFor(model => model.dateOfBirth)
and I would like the existing date picker to be replaced with the Bootstrap one.
I have already installed the files via the NuGet Package console. In the < head> section I have pasted:
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker()
$('#sandbox-container .input-append.date').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and in the < body> I have:
<div class="input-append date">
<input type="text" class="span2"><span class="add-on"><i class="icon-th"></i></span>
</div>
This is pretty much what the documentation specified but obviously I am going wrong somewhere. Could somebody please assist me with this issue.
Related
First of all, i'm new on MVC.
In my form, i'm using two datepickers as start and end time to display a report.
<div class="form-group">
<div class="controls">
#(Html.Kendo().DatePickerFor(m => m))
</div>
</div>
I'm taking date format with "tr-TR" culture like "dd/MM/yyyy". It supposed to be like this.
<script src="~/Scripts/kendo/2013.3.1119/cultures/kendo.culture.tr-TR.min.js"></script>
<script>
$(document).ready(function () {
kendo.culture('tr-TR');
});
</script>
But i need to send date to controller in universal format like "yyyy/MM/dd". How can i change date format on submit event, before sending to server?
My submit event below:
<div>
#using (Html.BeginForm())
{
#Html.EditorFor(m => m.Criteria)
<button class="btn-default" id="btnSearch" type="submit">Ara</button>
}
</div>
The best possible approach would be to have both the client and the server side use the same culture all the times. More information on the matter can be found in the following help article:
Use the same culture on the server and client-side
Another option is to manually convert the value on form "submit" event or have custom model binder.
I want to design Custom text box in MVC4.
Can anyone please suggest me the approach.
Any help is really appreciated.
You can try this plugin digitalBush Masking Plugin.
<script type="text/javascript">
$(function () {
$(".inputclass").mask("9999.99/9999.99");
});
</script>
HTML Source
<input type="text" class="inputclass" value="" />
I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div id="datetimepicker1" class="input-append date">
Date and Time Test
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.
Here is what I get:
Don´t know what to do.. I need help, please. Thanks.
The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.
I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:
http://eonasdan.github.io/bootstrap-datetimepicker/
http://www.malot.fr/bootstrap-datetimepicker/
And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.
This is the editor for the startdate #Html.EditorFor(model => model.startDate) and I have jquery blow, the code for the query is on the page and when I run the program the calender pop up does not come up, both code are on the dame cshtml page
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#startDate" ).datepicker();
});
</script>
Replace
#Html.EditorFor(model => model.startDate)
with
#Html.EditorFor(model => model.startDate, new { #class="startDate" })
because you have not giveen a class to that field and change your jQuery to
$(function() {
$( ".startDate" ).datepicker();
});
so # becomes . as we are using a class.
You need to verify that all your external scripts loaded properly. I suggest you install Fiddler and then watch your requests and see if all of them loaded. If that all is ok then you need to check that the scripts actually load before your call for the datepicker function. If you're using MVC 4 and sections feature that would mean that all you javascript code needs to go into the SCRIPTS section which is placed on your view AFTER the calls to load jquery and jquery-ui libraries. Use Goggle Chrome's console to verify that there are no javascript errors.
Looking at the code you posted here everything should be working. I've done this millions of times and every time I had a problem it was because I was missing a JQuery library reference or I wasn't loading them in proper order.
My Code:
#using Telerik.Web.Mvc.UI;
#using Telerik.Web.UI;
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
<script type="text/javascript">
console.log($)
</script>
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>. The page features <mark>videos, tutorials,
and samples</mark> to help you get the most from ASP.NET MVC. If you have
any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC"
title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn
more</a></li>
<li class="two">
<h5>Add NuGet packages and jump start your coding</h5>
NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">
Learn more</a></li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn
more</a></li>
</ol>
I don't know what I have to do further for displaying the DatePicker when I am clicking the datepicker text field. Please Help. Thanks.
There's nothing wrong with
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
It works fine in my project (although the calendar opens when clicking the icon, not the textbox, but I don't think that's actually your question at this point).
Check to be certain that
#(Html.Telerik().ScriptRegistrar()
is being called. Noramlly this is in _Layout, but can be put directly in the file using a Telerik control.
On a side note (I don't think it's causing your problem, but certainly isn't helping anything), these lines are wrong:
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
.css files aren't scripts. They should be referenced like this:
<link href="~/Scripts/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" type="text/css"/>
And you don't seem to actually be using any jQuery on this page, so you probably don't need to import all those scripts and css files anyway. Telerik uses its own jQuery scripts, that's what the script Registrar is for.