Bootstrap Date and Time Picker not showing icons in MVC Razor - c#

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.

Related

Hijri bootstrap DatePicker in C#

I am using bootstrap and I need the Islamic date date picker, I tried but it did not work.
Any Help please.
<link href="CSS/bootstrap-combined.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy',
language: 'ar-LB'
});
$('#datetimepicker').datepicker({ language: "ar-LB" });
</script>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>

There is no support for the Hijri calendar in bootstrap. You will have to revert to the standard jQuery datetimepicker or another library.
See here for different jQuery Calendars

EDIT: The following solution does not provide directions to implementing the Hijri Calendar, but instead a translation of the Gregorian calendar into Arabic. This does not answer OPs question, but I leave it here since it might be useful to others.
Here is a list of all languages for the bootstrap datetimepicker. As you can see, Arabic is not there.
So I grabbed the Arabic language for the jQuery datetimepicker and created the new language for bootstrap:
;(function($){
$.fn.datetimepicker.dates['ar'] = {
days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
daysShort: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
daysMin: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
months: ['محرّم', 'صفر', 'ربيع الأول', 'ربيع الآخر أو ربيع الثاني', 'جمادى الاول', 'جمادى الآخر أو جمادى الثاني', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
monthsShort: ['محرّم', 'صفر', 'ربيع الأول', 'ربيع الآخر أو ربيع الثاني', 'جمادى الاول', 'جمادى الآخر أو جمادى الثاني', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
today: ""
};
}(jQuery));
After that, we can use the 'ar' language:
$('#datetimepicker-ar').datetimepicker({
format: 'dd/MM/yyyy',
language: 'ar'
});
See this JS Fiddle
PLEASE NOTE: I don't speak or read Arabic so I'm not sure if everything is correct. For some reason bootstrap seems to include the name for Sunday twice in the days arrays, so I just copied the first day in Arabic and added it as an eighth element. Please check if it's correct before usage!
Also, there was no translation of 'today' in the file I used, so I left that blank. You'll have to find it for yourself.

Integrating Bootstrap-datepicker with MVC4 Form

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.

Using tabs in asp.net mvc with jquery ui

I am trying to create tabs in my mvc application using jquery ui.
I tried the following code:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li>Exploded pie slice</li>
<li>Normal pie chart</li>
</ul>
<div id="tabs-1">#(Html.Partial("PartialView1"))</div>
<div id="tabs-2">#(Html.Partial("PartialView2"))</div>
</div>
I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.
Thanks,
Anandaraj

You haven't included the jQuery UI CSS file.
Either use the default skin, or pick one, or even build your own.
Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).

Date Picker is not displaying in the browser

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.

Need to create a datepicker in Asp.net?

I need to create a datepicker in asp.net.
Got a few in the web but lokking for some thing different.
Thanks

I suggest you use the jQueryUI datepicker plugin:
http://jqueryui.com/demos/datepicker/
Here is an example from jQuery UI website:
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

I agree Jquery is nice
http://www.ajaxline.com/10-best-jquery-datepickers-plugins
This is also nice, I have used this many time, very simple:
http://www.graymattersoft.com/NETProducts/GMDatePicker/tabid/68/Default.aspx

Have you tried the ASP.NET Ajax Calendar control? http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

Categories