How to change dateformat in a Jquery date time picker - c#

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']);

Related

How to disable pevious date in html form using min attribute of date datatype

I want to set min attribute to today's date and disable previous date in datepicker in html view page C#
<input type="date" min="new Date().today()"/>

There isn't min attribute that can disable the previous date without writing any js script.
You can try to use JQuery library datepicker API which supports disabling the previous date by minDate
$(function() {
$("#datepicker1").datepicker({
changeYear: true,
changeMonth: true,
minDate:0
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Datepicker:<input id="datepicker1" type="text" required value="">

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.

Second JavaScript code is always overriding the first

I am using 2 separate JavaScript refs...see below...
<script src="../scripts/jsKeyboard.js" type="text/jscript"></script>
<script src="../scripts/DOB_Validate.js" type="text/jscript"></script>
I am calling each Javascript through an onfocus event using two seperate asp:Textbox...see below:
<asp:Textbox id="txtFirstName" runat="server" onfocus="jsKeyboard.focus(this);clean(this);" placeholder="Touch Here To Enter First Name" autofocus top="50%"></asp:Textbox>
<asp:TextBox ID="TextBox1" runat="server" onfocus="board.focus(this);clean(this);" placeholder="MM/DD/YYYY"
maxlength="10" Width="5%"></asp:TextBox>
I have two scripts inside the head of the page that initialize the keyboard with the corresponding .js external ref (see two separate .js scripts above)...
Scripts inside head:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
});
</script>
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
});
</script>
However...the second script inside the head is always overriding the other...
How can I fix this issue??? Thank you...

Both of your functions look exactly the same. I am going to assume you want the same functionality for both? If that's the case, you are hooking into the same element 'txtContent'. You need to have the other script hook into 'TextBox1'.
For txtContent:
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
$("#txtContent").val(initText);
});
</script>
And TextBox1:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
$("#TextBox1").val(initText);
});
</script>
You also may want to consider changing the name of TextBox1.

Textbox not show datepicker with javascript?

I'm using DevExpress develop my website...Now i'm use Aspxtextbox with jquery to display datepicker. I don't use AspxDateEdit because i can't apply my css...Here is my code:
Javascript
$(function () {
$("#<%= txtDate.ClientID %>").datepicker(
{ dateFormat: 'dd/mm/yy', minDate: 0 })
});
ASPX
<dx:ASPxTextBox Native="true" CssClass="span3" runat="server" ID="txtDate">
<ValidationSettings ErrorDisplayMode="Text" ErrorFrameStyle-ForeColor="Red" Display="Dynamic" ErrorTextPosition="Bottom" SetFocusOnError="true">
<RequiredField IsRequired="True" ErrorText="The value is required" />
</ValidationSettings>
</dx:ASPxTextBox>
When i view source code, input id = ContentPlaceHolder1_ctl00_txtDate..What's wrong in my code?

For the datepicker to work you need to reference both jQuery and THEN (note the order) -> jQuery UI.
So it will be something like this:
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/yourapp.js"></script>
I hope this helps.
EDIT
Also, not sure if the textbox ID is actually trimmed, so try to remove the spaces:
$("#<%=txtDate.ClientID %>")

Jquery timepickr C#

I try to use timepickr plugin, from http://haineault.com/media/jquery/ui-timepickr/page/
my headers:
<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.2.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.utils.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.strings.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/ui.timepickr.js")%>" type="text/javascript"></script>
my view:
<input type="text" id="hourstime" style=" font-family:Arial;width: 47px; vertical-align:inherit;margin:1;"/>
and jquery:
$(document).ready(function () {
$('#hourstime').timepickr();
});
So, it fails with error:
Uncaught TypeError: Cannot call method 'call' of undefined
Any ideas?

You also need to include jquery.timepickr.js. Since this plugin has 3 files,
2 JS [jquery.timepickr.js, ui.timepickr.js] and
1 CSS [jquery.timepickr.css]

This plugin didn't support jQueryUI >= 1.8
Use updated plugin for jQueryUI 1.8: http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/

Categories