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.
Related
I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!
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.
I'm trying to add datapicker to my project. I have followed a tutorial.
I have added the following code to the DatePickerReady.js file:
$(function () {
$(".datefield").datepicker();
});
I have added the following code at bottom of the head element in the Views\Shared_Layout.cshtml file.
<link href="#Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
I have added this to Views\Home\Index.cshtml
#model Nullable<DateTime>
#{
string dts ="";
if (Model != null)
{
dts = ((DateTime)Model).ToShortDateString();
}
#Html.TextBox("start", String.Format("{0:d}", dts), new { #class = "datefield", type = "date" })
}
But when I focus/click the textbox it does nothing. The calendar doesn't appear. I'm not getting any errors as well.
Any clue?
Firstly make sure you have included all your scripts, from the scripts you have posted I did not see jquery.js, also make sure that these scripts are indeed available i.e check thier paths.
Use firebug and find out if you are getting any console errors when you click on the dateTime textbox.
Next check if the class is being attached to html textbox input and the jquery call is also made, verify these.
Here is a simple step by step guide to using Datepicker in ASP.NET MVC 3 : Introduction to jquery Date Picker in ASP.NET MVC
and I am very curious to know what does DatePickerReady.js do ?
I have a panel. in that panel there is one text box for some input and another one for taking date from calendar control. I have put calendar control below the second text box(i.e. txtDate), but I don't want it to be displayed when the page is loaded, instead I want a small image of calendar and on clicking that image a calendar should pop up and selected date must be captured by txtdate textbox.
Please help me with .aspx and .cs file. I'm using asp.net with C#.
Use AJAX Calender Extender. Here is the Sample Markup Code:
<asp:CalendarExtender ID="ControlIDHere" runat="server" Enabled="True"
TargetControlID="TextBoxIDHere" PopupButtonID="CalenderImageIDHere" Format="MM/dd/yyyy">
</asp:CalendarExtender>
An ASP.NET based solution for calender control is best explained here
But I would suggest you to go forward with Ajax based solution
Ajax Calender
Calender control in AJax toolkit
You can user use Jquery library in your project. Below is the example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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 >
$(document).ready( function() {
$("[id=^datepicker]").datepicker();
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Date: <asp:TextBox id="datepicker" runat="server">
</p>
</form>
</body>
</html>
I am using a date time picker and the date format is in MM/dd/yyyy, I want to change the date format of the calendar so that in the website it displays dd/MM/yyyy
http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js
I have saved a copy of this script. and this is how I use it
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript" />
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript" />
<script type="text/javascript">
$(function () {
$('.datePicker').datetimepicker();
});
</script>
<asp:TextBox ID="txt_SendAt" class="datePicker" runat="server" />
where should I make changes. thanks.
Replace this line:
$('.datePicker').datetimepicker();
with:
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
The above should Initialize a datetimepicker with the dateFormat option specified.
All the options can be found here with examples:
$.datepicker.regional['custom'] = {
dateFormat: 'dd/MM/yyyy',
};
$.datepicker.setDefaults($.datepicker.regional['custom']);