We Keep Coding

Jquery function not working on the first click

i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.

DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.

Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc

You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});

jquery datepicker - show week number if has specific class

I am using the jquery ui datepicker but I want to show the week number only if the input element has a specific class...
Here's what I've tried but with no success...
$(".myCal").datepicker({
showWeek: function(dateText, inst) { $(this).hasClass("showWeek"); }
});

As class selector is used, each method is required to iterate over all matching elements and then use $(this).
$(".myCal").each(function () {
$(this).datepicker({
showWeek: $(this).hasClass('showWeek')
});
});
http://jsfiddle.net/Ubw3L/5/

Can you try this
$(".myCal").datepicker({
showWeek: $(this).hasClass("showWeek");
});
As the API states, showWeek accept boolean value.

$('.myCal').each(function () {
$(this).datepicker({
showWeek: $(this).hasClass('showWeek');
});
});

How to get the year from datepicker ui?

I have code which the user choose date .
I need to to get the value year and put it in div.
How can I do that?
jsFissl Demo
many Thx.
the code:
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<div id="Year"></div>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("#Year").text($("#datepicker").val());
I try to use .substring(0, 4)but I don't kno how.

You can convert that input value into a Javascript Date as well and have everything from it's method.
http://jsbin.com/ugaxob/2/edit
$(".btn-getdate").click(function() {
var dt = $("#datepicker").val(),
d = new Date(dt);
$("#Year").text(d.getFullYear());
});
or go wild and use MomentJs plugin and you will get so much fun (live example updated)
When you want to perform something on a plugin, that is called act upon an event, and you should see the Events tab in the DatePicker, where you can find onSelect.
My live example was changed to act upon selection and no need to press any link or button.

This shows the year you wanted to extract.
HTML:
<meta charset="utf-8">
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<button>Show year</button>
</div><!-- End demo -->
JS:
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("button").click(function() {
var split = $("#datepicker").val().split('/');
alert(split[2]);
});
});​
The split method of String class divides the string and returns as an array.
EDIT: This does everything you wanted.
Take a look at the onSelect event.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText) {
var split = $("#datepicker").val().split('/');
$("#Year").text(split[2]);
}
});
});​

How about this : JSFiddle
No need to do string manipulation, just create Date object using selected date from datepicker and use getFullYear() method to get selected year...
$(function() {
$("#datepicker").datepicker({
onSelect: function(date) {
var d = new Date(date);
alert(d.getFullYear());
},
changeMonth: true,
changeYear: true
});
});

jQuery extract id and then attach calendar based on class

I'm working with an existing javascript library that does an AJAX call and then executes an optional callback function. The callback function gets passed the HTML string that is being loaded into the DOM. I need to assign the jQuery datepicker to all elements in that HTML string that are of calendar class.
A simplified example of the HTML string from the AJAX query is:
<tr id='1234'>
<td>
<input type="text" value="somevalue" />
<input type="text" class="calendar" value="21/12/2010" />
</td>
<td>
<input type="text" value="someothervalue" />
<input type="text" class="calendar" value="21/12/2011" />
</td>
</tr>
I can execute the following in the callback function to set the datepicker on the two required inputs but that is causing weird things to happen with the datepicker such as the next button jumping from the year 2010 to 1900 and the previous button to jump to 1899.
$(".calendar").datepicker('destroy').datepicker({ dateFormat: 'dd/mm/yy', showAnim: 'fadeIn', duration: 200, gotoCurrent: true, changeYear: true, yearRange: 'c-120:c' });
As such I'd like to instead just confine the statement to the elements within the HTML snippet supplied to the callback function. What jQuery pattern can I use to acheive the following outcome noting that the html parameter is a string:
function SetCalendar(html) {
$("html.children .calendar").datepicker('destroy').datepicker({ dateFormat: 'dd/mm/yy', showAnim: 'fadeIn', duration: 200, gotoCurrent: true, changeYear: true, yearRange: 'c-120:c' });
}

You almost had it. If you use this as your ajax success function.
function ajaxSuccessFn(html) {
$(html).find('input.calendar').datepicker({
dateFormat: 'dd/mm/yy',
showAnim: 'fadeIn',
duration: 200,
gotoCurrent: true,
changeYear: true,
yearRange: 'c-120:c'
}).end().appendTo('#someElement');
}

There's probably a much better way but this works. I've still got the annoying issue where the next button on the datepicker jumps from July 2010 to January 1900 but I guess that's something else in the datepicker code.
function SetCalendar(html) {
var id = "#" + /.*?id="(.*?)"/.exec(html)[1];
$(id).find('input.calendar').datepicker('destroy').datepicker({
dateFormat: 'dd/mm/yy',
showAnim: 'fadeIn',
duration: 200,
gotoCurrent: true,
changeYear: true,
yearRange: 'c-120:c'
});
}

Is there anyway to make a jQuery UI Datepicker unclickable?

Is there anyway to make a jQuery UI Datepicker unclickable, so that it's essentially just displaying a date? I tried
$("#calendar").datepicker({
disabled: true,
altField: '#note_date',
maxDate: 0
});
but it didn't work. Thanks for reading.

Something like this?
Example: http://jsfiddle.net/Ay6Nv/
$('#calendar').datepicker({
beforeShowDay: function(date) {
return [new Date(this.value).getDate() == date.getDate()];
}
});​

Why don't you add the readonly attribute at the input like this :
<input type='text' value='24/01/2019' readonly="readonly" />