Disable event click from component angular - javascript

I am working with the component on the link: https://ej2.syncfusion.com/angular/documentation/api/calendar/
I couldn't find any function or property that disables component state so I can't select dates on the calendar.
For this reason I would like to know if it is possible to remove the click event so that it cannot select dates in a given situation.
I can only disable the dates that he can't select, only that I can't display the selected dates that I manually entered in the schedule.
Is it possible to remove the event from the DOM so that it cannot perform any action on the component? How can I do this?

You can disable click event by using css somehing like this
/deep/.calendar {
pointer-events: none;
}
You need to add correct class or id of the element you want to disable click event

You can use renderDayCell method to disable the required dates in syncfusion date picker component. Please check the below code block.
https://stackblitz.com/edit/angular-syz8gx?file=app.component.html
Here, we have disabled the week ends in the DatePicker popup. So, we could not select or click the dates.

Related

Semantic UI multiple select dropdown - close event

I am trying to get the values selected in a multiple select dropdown - just once, because I am populating a cascading dropdown depending on the selected values in the original dropdown, and don't want to get data every time the user selects one value from the multiple select. Ideally I want to get the values after closing down the dropdown by clicking out of the dropdown or on the down arrow on the dropdown.
Does anyone know if there is an event for this? After searching online, I tried onClose, but that apparently is for React only, and also is not in the documentation (https://semantic-ui.com/modules/dropdown.html).
I have been looking for an answer since posting the question, and yes, I found a solution.
Using onHide, the values can be captured just once.
$('#ddlMultiple').dropdown(
{
onHide : function () {
//get the selected values here
}
}
);

ngb-datepicker and Angular 4: add button inside the datepicker box

I'd like to add a button inside the datepicker box, something like "Today" which is clickable and selects the current date;
From what i've seen in the documentation there's only the [dateTemplate] option which seems to affect the date elements inside the datepicker. [custom day view]
Is there another attribute or some other way one can use to add a button inside this box?

Is there a way to deselect date in Pikaday?

Is there a way to deselect selected by user day in Pikaday calendar?
I would like to get from this state
to the following one
You could set the pickers date to null using .setDate(null) and attaching a listener to a button you press as described in the documentation to clear the selected date.

How to programatically change a bootstrap dropdown to an specific state?

In the documentation I see I can programmatically toggle a dropdown by doing:
$().dropdown('toggle')
That works fine, but what if I want to dropdown to be shown or not shown? Is there a way to do something like this?
$().dropdown('show')
$().dropdown('hide')
According to the docs the only method there is for bootstrap dropdowns is toggle. However you can use the aria-expanded attribute to see if the dropdown is expanded or not. For example, if you wanted to "hide" all of the dropdowns you would do something like this:
$(".dropdownClass").each(function(){
if($(this).attr("aria-expanded") == true) //depending on your jQuery version you may want to use .prop() instead of .attr()
$(this).dropdown('toggle');
});
I'm slightly confused by your question. Calling $().dropdown('toggle') will reverse the state of the dropdown. For instance, it will show the dropdown if the dropdown is hidden; or hide the dropdown if it's open.
There are no methods aside from toggle that can be called for the dropdown.
Edit: you can register listeners for some of the other instance events (like show.bs.dropdown for instance, so you can use code to check if the dropdown is being shown, but cannot invoke it directly aside from using toggle, as mentioned)
Doesn't seem possible: Dropdown plugin seems to only have two public methods (toggle and keydown). And toggle does not accept any arguments for customization - only event.
Take a look at the source code yourself: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js

jQuery Chosen plugin - first option doesn't trigger change event?

So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});

Categories