jQuery extract id and then attach calendar based on class - javascript

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

Related

Trying to set min & max time date in jquery datepicker in two inputs

So I am working on a project for my classes and I had to set minimum and maximum date for two inputs. First one is being set from now to 12 months from now, and the other was meant to be set from date which was picked in the first input field to 12 months from now.
<p>From: <input type="text" id="dateFrom"></p>
<p>To: <input type="text" id="dateTo"></p>
this is my JS
var chosenDate = document.getElementById("dateFrom").value;
$( function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: '0',
});
})
$( function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: chosenDate,
});
})
On the preview in a browser it works only for last session. How can I fix this?
you have to use change event on #dateFrom, so whenever the value of the input is changed,the minDate property of the datepicker event get the current input value
of #dateFrom
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
the final code should be like this:
var chosenDate = document.getElementById("dateFrom");
$(function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: "0"
});
});
$(function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: chosenDate.value
});
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
});
notice the chosenDate variable is now just the element not the value of the element

function from javascript was working for datepicker and listbox, but now it is not working

before few days function for datepicker and multiselect was woking but now it is not working. cant detect problem
$(function ()
{
$("#txtBirthDate").datepicker({ dateFormat: 'dd/mm/yy' , changeMonth: true, changeYear: true, yearRange: '1945:' + (new Date).getFullYear() });
$('#lstFinancialArea').multiselect({
includeSelectAllOption: true
});
});
<asp:TextBox ID="txtBirthDate" runat="server" CssClass="form-control datepickerCompleted" MaxLength="20" ReadOnly="true"></asp:TextBox>
When aspx page run in the browser at that time id of textbox changed. Try below code
$(function ()
{
$('#<%=txtBirthDate.ClientID %>').datepicker({ dateFormat: 'dd/mm/yy' , changeMonth: true, changeYear: true, yearRange: '1945:' + (new Date).getFullYear() });
$('#<%=lstFinancialArea.ClientID %>').multiselect({
includeSelectAllOption: true
});
});
<asp:TextBox ID="txtBirthDate" runat="server" CssClass="form-control datepickerCompleted" MaxLength="20" ReadOnly="true"></asp:TextBox>
After postback, you need to again bind your date picker.
$(document).ready(function(){
//Binding Code
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//Binding Code Again
$('#<%=txtBirthDate.ClientID %>').datepicker({ dateFormat: 'dd/mm/yy' , changeMonth: true, changeYear: true, yearRange: '1945:' + (new Date).getFullYear() });
$('#<%=lstFinancialArea.ClientID %>').multiselect({
includeSelectAllOption: true
});
}
});
And as mentiones about the $('#<%=txtBirthDate.ClientID %>') will work only if your JS is in the same .aspx file
Yes please inspect your code in the browser and there you will notice that during run time text box id would have change actually. So now you can use $('#<%=txtBirthdate.ClientID%>').datepicker(). It would work for you my friend.

JQUI datepicker changing month or year resets after selecting

I'm experiencing an issue using the JQUI datepicker where I have a from and to text field. Picking a from date, auto selects the next field using the onClose function.
When trying to change the month or year from the drop down boxes in the to text field the datepicker popup gets reset and the user has to re-select the month or year. This only appears to happen on the to field.
Am I doing something wrong in the code to cause this behaviour? I've noticed this in Chrome and Firefox on Windows.
JS FIDDLE DEMO
CODE
$('#sfd_start').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+2y",
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
$('#sfd_end').focus();
}
});
$('#sfd_end').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: "+2y"
});
EDIT: There doesn't seem to be an issue if the datepicker is not auto opened after selecting a from date if that helps narrow it down.
Seems to be a timing issue. Change your onClose function to:
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
setTimeout(function () {
$('#sfd_end').focus();
}, 100);
}
jsFiddle example

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)
});

jQueryUI datepicker - second instance flashes then disappears when show() is called

I have two jQueryUI datepickers on my page.
They're initialised as below:
jQuery("#departureDate").datepicker({
beforeShow: function() {
getDatesForCalendar("outbound");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); }
});
jQuery("#returnDate").datepicker({
beforeShow: function() {
getDatesForCalendar("return");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.
My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn't appear to affect IE8.
I've tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker("show") I've tried calling focus() on the field it's tied to. Nothing has worked!
Any advice would be greatly appreciated.
Many thanks,
Jack
Instead of showing the datepicker in the onSelect use the onClose event.
jQuery("#departureDate").datepicker({
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onClose:function()
{
jQuery('#returnDate').datepicker('show');
}
});
jQuery("#returnDate").datepicker({
numberOfMonths:3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});​
Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)
http://jsfiddle.net/6haqv/3/
Possible bug in jquery ui 1.8
I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.
As work around to this problem I tried following and it works.
var checkin = $('#dpd1').datepicker({
minDate:now,
numberOfMonths:2,
showOn: "button",
buttonImage: "img/calender.png",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
var dateObject=new Date(selectedDate);
dateObject.setDate(dateObject.getDate()+1);
$( "#dpd2" ).datepicker( "option", "minDate", dateObject );
showSecond=true;
},
onClose: function( selectedDate ) {
if(showSecond===true){
$( "#dpd2" ).datepicker("show");
showSecond=false;
}
}
});
I just got the same bug in jQuery UI 1.11.0.
I found a workaround by calling a setTimeout in the onSelect datepicker method:
$('#arrival-date, #departure-date').datepicker({
showAnim: 'slideDown',
onSelect: function(dateText, inst){
if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
{
setTimeout(function() {
$('#departure-date').datepicker('show');
}, 100);
}
}
});
Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?
I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.

Categories