CSS is not applying on first click - javascript

I have two calendars implemented in one page, but in two different popup boxes. These two calendars have two different CSS applied (e.g. 1.css, 2.css). I used jQuery to enable and disable a calendar in one of the popup boxes. Currently, I am getting new CSS applied when the calendar is open, and removed when the calendar is closed.
My issue is, on first click, it is first applying the old CSS, and after I close the calendar and click it again, then it's applying the new CSS.
Here is the code I used:
$('#inputField').datepicker({
beforeShow: function(input, inst) {
$('div#div1').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=false;
},
onClose: function() {
$('div#div2').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=true;
}
});
How can I fix this?

This issue has been resolved. Like I mentioned in my question, I have two calendars on same page with different css. Since, the both calendar has same component, there was namespace conflict. The reason I append datepicker to an empty div was to isolate one calendar with another. Aparently it did work but was not the 100% accurate. So, I changed the namespace of one calendar that is being used as class for css. This solved my problem.

Related

Bootstrap DateTimePicker: Open one datetimepicker at a time

I have an html template with more than one datetimepickers. If I click in the button to open one datetimepicker and after that click in another to open the new one, the first one stays unchanged (it doesn't close). I want to be able to open only one datetimepicker at a time.
Here's a JsFiddle Demo
$('#datetimepicker1, #datetimepicker2').datetimepicker();
This was standard behaviour for bootstrap datetimepicker 2.5 when working with the moment 2.5 (moment-with-langs) but now it seems not to be working like that.
Does anyone have any ideas to workaround this issue?
Note: I'm using Eonasdan bootstrap-datetimepicker version 3.0.3 with moment 2.8 (moment-with-locales), jQuery 1.9 and Bootstrap 3
What's tricky here is that bootstrap-datetimepicker appends to <body> a <div> for each datetimepicker initialized that is completely unrelated to its trigger button.
Try this:
$('.date').datetimepicker();
$(document).ready(function() {
// Select all elements with the 'date' class
$('.date').on('dp.show', function() {
$('.date').not($(this)).each(function() {
$(this).data("DateTimePicker").hide();
// $('.date').not($(this)) selects all the .date elements except
// for the one being shown by the datetimepicker dp.show event.
// The dp.show event is fired when a new datetimepicker is opened.
// We use the .data("DateTimePicker") to access the datetimepicker object
// (we have to use a jQuery each loop in order to access all the
// datetimepickers.
// .hide() -- we hide it.
});
});
});
That should allow only one datetimepicker to be open at a time.
Although Joel Lubrano's answer works as intended for preloaded widgets ... it lacks the possibility to work with dynamically generated ones (via JS). Meanwhile, I've managed to work around this issue from inside the component solving both problems by adding one single line.
Inside the component's JS locate the picker.show function (around line 1150 depending on version (this in v1.3.1)) ... inside the last else statement of that function, place the following line as the first instruction of that statement.
$('.picker-open').hide().removeClass('picker-open');
and that's it. After that you only need to encapsulate the DTP initialization inside a function and call it on document ready and after dynamically generated widgets.
function DTPinit(){
$('.dtp').datetimepicker();
}
$(function(){
DTPinit();
$('#dtp_gen').on('click', function(){
$('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>');
DTPinit();
});
});
Here you have a JSFiddle demonstating what I'm describing above. The BS-DTP component is being loaded inside the fiddle JS container for editing purposes.

Styling custom date picker

I'm using this datepicker plugin to display a popup datepicker.
It's working fine, but I'm having trouble assigning it the correct styles.
I have 2 of them, the first not being an issue.
I have the following JS:
$(".datepicker1").pickadate({
min: 1,
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
What it does is simple: The moment a user selects a date on the first picker, the second one is displayed, with the previously selected date displayed(In order to let the user know what the range of dates will be that he/she selects).
Everything works just fine, but I don't want the default blue square background for the selected date. I want something like this as opposed to what I currently have, which is just a different background-color.
Does anyone know how I can achieve this?
Without being able to see the markup or css, my first inclination with these is to add a CSS triangle either to the element, or to the elements :before pseudo class.
As for making the CSS triangle, go here:
http://apps.eky.hk/css-triangle-generator/
You have to find the class
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted
in the default.date.css file. Then, you can easily modify "everything" concerning the today hightlight shape

Change jquery ui datepicker programmatically

I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).
there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/

Show/Hide multiple div classes independently based on checkbox value

I've seen several questions similar to mine, but I can't seem to find a solution.
I'm working on a calendar with JavaScript powered by FullCalendar using Google XML URLs. My objective is to show/hide events on the calendar based on a checkbox value corresponding to the events on the calendar. Such events are grouped by type (they're on separate Google calendars with separate XML URLs but are rendered on the same calendar display on the webpage) and have different div class names. I have 11 different classes total and need a way to toggle their visibility independently of the other classes based on a checkbox value.
I'm in the process of learning JQuery/JavaScript and hence much of it is still Greek to me. I found a solution that works for a single class, but is dependent on all of the other checkboxes' values if other checkboxes are present. This is the JS I'm using currently:
<script type="text/javascript">
function doInputs(obj){
var checkbox = $("input[type=checkbox]:checked");
var i =0, box;
$('.className').fadeOut('fast');
while(box = checkbox[i++]){
if(!box.checked)continue;
$('.className').fadeIn('fast');
break;
}
}
</script>
And the corresponding mark-up:
<input type="checkbox" checked="checked" name="className" onclick="doInputs(this)"> Class Name Text
This works quite well; however, I can't figure out how to make it work with multiple div classes. Any suggestions?
I found a different solution, one that works much better and uses existing FullCalendar JS actions. Instead of using div classes and their class names as the determining factor of their display status, I used FullCalendar's removeEventSource and addEventSource actions to show/hide each of the 11 calendars being toggled.
The original JS is here. A little more picking around and I would have found this much sooner.
Thanks to those that commented and answered.
You can pass class name of div along with JS function e.g.
doInputs(this,'classname')
and according to that class name you can toggle that class
E.G
function doInputs(obj,cc){
......
$('.' + cc).fadeOut('fast');
......
}

How to hide / show yui.calendar.DatePicker in wicket

I've run in to a problem I hope you guys can help me with.
I'm using a DateTextField with a DatePicker (from yui.calendar), they are both added to a WebMarkupContainer with OutputMarkupId and OutputMarkupPlaceholderTag set to true.
I want to be able to set the visibility of the container, but when I set it from true to false to true, the datepicker is no longer visible (I'm guessing it has to do with it not beeing mentioned in the HTML(?)) and I have to reload the entire page (and loose the input data) to get the DatePicker visible again. There is no problem with the DateTextField. Is there any good way to work around this?
JAVA:
invoiceDateFromField = new DateTextField("invoiceDateFromField", new PropertyModel(this, "invoiceDateFrom"), new PatternDateConverter("yyyy-MM-dd", true));
invoiceDateFromField.setOutputMarkupPlaceholderTag(true);
invoiceDateFromField.add(new DatePicker());
containsAllContainer.add(invoiceDateFromField);
AjaxLink onClick:
containsAllContainer.setVisible(!containsAllContainer.isVisible());
target.add(containsAllContainer);//Edit
I tried to remove the DatePicker from invoiceDateFromField, and then add a new one when the container is set to visible, but this did not seem to work either.
Thanks!
Olle
YUI will lose its connection to the DOM element when you set it visible=false in Wicket (because the node is removed from the DOM). So when you add it back to the page, your instance of YUI calendar no longer has any associated field in the DOM. You need to be sure to update your reference with a new instance of calendar every time you re-render the DateTextField with Wicket

Categories