Technically, they are not on the "same" page - the widget is on the main page, and the picker is on a sub-page which gets loaded inline through Jquery ajax.
I have a Datepicker in Widget mode on a page which shows up fine
<div id="datepicker" style="margin-top: 3px;"></div>
JQuery portion -
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
if ($.inArray(y + '-' + (m + 1) + '-' + d, highlightDates) != -1) {
return [true, 'ui-datepicker-testavailable', ''];
}
return [true];
},
onSelect: function (selectedDate, instance) {
PopulateScheduledTestsByDate(new Date(selectedDate));
},
onChangeMonthYear: function (year, month, inst) {
GetScheduledTestDatesByMonth(month, year);
}
});
This works fine and shows up beautifully on the page.
There is a section on this page, which loads up a second page using Jquery Ajax. On this "second" page, there is a datepicker attached to a textbox, which does not show up when clicked on the text box.
<input id="runSchedule" name="runSchedule" data-bind="value: runSchedule, visible: pageModeEdit" class="inputfield" style="display: none" />
JQuery portion -
$(document).ready(function () {
$('#runSchedule').datepicker();
});
If I comment out the Widget datepicker Javascript on the main page, the input datepicker shows up fine. But I cannot get both to show up together. Anything I am missing here?
Appreciate any help.
Related
function init() {
$('.message-composition__footer')
.prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
let dp = $( "#datepicker_1" );
console.log(dp);
$(dp).datepicker({
showOn: 'both',
onSelect: function (dateText, inst) {
schedule_date = dateText;
$( dp ).val(dateText);
console.log("schedule_date - " + schedule_date);
}
});
};
document.addEventListener('turbolinks:load', () => {
console.log('turbolinks:load');
init();
});
(function($) {
console.log('new-message script loaded');
init();
})(jQuery);
'turbolinks:load' event fires successfully but datepicker does not work.
if I reload the page then it works. I'm stuck here for 2 days now, please help.
Datepicker after reloading page
Datepicker without reloading page (when 'turbolinks:load' event fires)
I have a Kendo MVC DatePicker as belowed, it will render as a textbox with a button (with calendar icon) within it which can trigger the date picker UI.
In my scenario, I need to insert a button to clear the value of the textbox, just on the left of the calendar button.
What my problem is that, is it possible (and how can I) insert another custom button inside the textbox rendered?
<div class="col-md-2 ">
#(Html.Kendo().DatePicker()
.Name("InspecitonDate")
.Value(DateTime.Now.AddMonths(-3)).Format("dd/MM/yyyy")
.HtmlAttributes(new { style = "width: 100%" })
)
</div>
Kendo date picker adds attribute data-role so select all the controls through jQuery on page with attribute data-role = datepicker
<script>
$(document).ready(function () {
var dt = $("[data-role='datepicker']");
//For each control insert an icon button calling js function clearDate to clear date input
$.each(dt,
function (i, d) {
$("#" + d.id).before("<span class='fa fa-times' onclick=\"clearDate('" + d.id + "')\"></span>");
});
});
function clearDate(inputId) {
$("#"+inputId).data("kendoDatePicker").value(null);
}
I would suggest to write this code in some common js file so that all kendo date controls in every page can be changed. You may add some style too to move icon to right
.k-picker-wrap > span.fa-times {
position: absolute;
right: 35px;
top: 8px;
color:#01ace4;
cursor: pointer;
}
There is no such built-in option, so you need to do it yourself. So you need to append the needed extra button on document.ready
I have the following problem with jQuery (1.10.3) tooltip plugin.
I have several links like
<a target="_blank" class="tooltip_top_studios">Link1</a>
and jquery code:
$(".tooltip_top_studios").tooltip({
tooltipClass:'ui-tooltip',
position: { my: "left+15 top", at: "right center" },
show: { effect: "fadeIn", delay: 300},
content: function() {
var img_src = $(this).attr('rel');
var html = "<h1 style='color:#d4dce8;margin-bottom:7px;'>"
+ $(this).attr('title') + "</h1>" + "<span style='font-weight:bold;font-size:10px;margin-bottom:7px;padding:0;display:block;'>"
+ $(this).attr('name') + "</span><img width=280 src='" + img_src + "' /> ";
return html;
},
});
The problem is that when I click the link, tooltip appears without any problem and new tab with link's URLopens, but when I return to the first page tooltip appears again. I have to click somewhere in page to close it.
Maybe there is a way to close all tooltips on window focus automatically ?
Finally I found the solution. The problem caused because then I return on page focus on tooltip anchore was not removed automaticaly, so tooltip executed again.
This code remove focus from all a tags and worked fine :
$(window).focus(function() {
$('a').focus(function() {
this.blur();
});
});
First:
I found that, if you return a null value into the content function, the tooltip will not be shown.
The second point:
You can find elements into html document using:
document.elementsFromPoint
And you have access to the event was fired into the context of content function.
Then the workaround is something like that:
$( "body" ).tooltip({
items: "[data-title]",
content: function() {
if (document.elementsFromPoint(event.pageX,event.pageY).indexOf(this) === -1)
return null;
var title = $(this).data("title");
return title;
},
hide: {
effect: "fadeOut"
}
});
I have weekday jQuery UI tabs as follows which I want to open on the current weekday:
<div id="tabs">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
I want the tabs to open on the current day of the week, I know something like this works:
.eq((new Date().getDay() || 7) - 1).click();
But can't get it to work and would appreciate some help. Also, I would like the tab for the current day to display the word 'Today' instead of the weekday.
I would appreciate some help.
Thanks,
Brendon
You can use the following to select the tab matching the current day:
$('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
and you could modify the text of the active tab with the following:
$('#tabs .ui-state-active a').text('Today');
HTML
<div id="tabs">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
</div>
JavaScript
$('#tabs').tabs();
$('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
$('#tabs .ui-state-active a').text('Today');
and needs the jQuery and jQuery UI libraries.
Demo
I'm using the JQuery DatePicker as a little Calendar Dashboard, marking dates with "agenda items" (events, office closed, meetings ...).
The dates are marked and clickable, but now I'd like to navigate to the "Day Detail" when the user clicks on one of the dates.
Here's what I have so far, but I'm missing (see ???) how I can append the selected date to the Url.Action method:
$(document).ready(function() {
$("#eventCalendar").datepicker({
numberOfMonths: 3,
beforeShowDay: highlightDays,
onSelect: function(date, instance){
window.location = '<%= Url.Action("Items", "Calendar", new { date = ???}) %>';
}
});
});
window.location = '<%= Url.Action("Items", "Calendar") %>?date=' + encodeURIComponent(date);