Hi I'm using pickadate and for some reason the date in my input field is not showing as the date when opening the picker.
Secondly the year picker is never shown.
$("input").click(function(){
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});
});
The initialization of the plugin is occurring when the input is clicked; the same input that is to have the plugin applied. The plugin needs to be initialized on the input before the input is clicked. To do this, remove the click function:
$("#inputdate").pickadate({
monthSelector: true,
yearSelector: true,
format:'ddd, d mmm'
});
Related
I have a custom format frmt defined, but I want to be able to tell if the format is already applied to the selection before executing execCommand('mceToggleFormat', false, 'frmt') since it isn't just a matter of toggling the <frmt> tags because I use AJAX to also fetch a ID in the tag, i.e. <frmt id='nnn'>. queryCommandState('frmt') always returns false. What am I doing wrong?
Here's the code:
ed.addButton('frmt', {
text: 'FRMT',
onclick: function() {
// I've tried using ed.queryCommandState('frmt') here to test if 'frmt' is already applied.
editor_content(ed, 'frmt'); // This uses ed.insertContent to add id='nnn'
ed.execCommand('mceToggleFormat', false, 'frmt');
}
})
Using gridjs.io, I would like to perform a search when the gridjs table is initialized. More generally speaking, I would like to know how to programatically use the search without the user using the input field.
What I tried:
enabled search plugin (search works perfectly fine when using the input field)
i tried "minicking" user input by selecting the input field with javascript and changing its
value to my keyword. This did not filter the table. Only when manually typing the
filtering is applied.
Example Code not working:
HTML
<div id="wrapper"></div>
Javascript
const grid = new Grid({
columns: ['Name', 'Email', 'Phone Number'],
search: true,
data: [
['John', 'john#example.com', '(353) 01 222 3333'],
['Mark', 'mark#gmail.com', '(01) 22 888 4444'],
['Eoin', 'eo3n#yahoo.com', '(05) 10 878 5554'],
['Nisen', 'nis900#gmail.com', '313 333 1923']
]
});
grid.render(document.getElementById("wrapper"));
// SEARCH/FILTER WITH JAVASCRIPT (NOT WORKING):
document.querySelector("input.gridjs-input").value = "John";
Result
The grid should be filtered, but it still shows all rows. The filter event was not dispatched. How can I dispatch the event with javascript?
The input element has an input Event listener attached to it (Image)
You can create and dispatch the event using this code:
// Find the gridjs searchbox and set the value
var el = document.querySelector('.gridjs-search-input');
el.value = newVal;
// Create and dispatch the event
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
el.dispatchEvent(event);
In this example clicking on a date it is possible to edit it, but if you use the option "stopEditingWhenGridLosesFocus", the date picker doesn't work anymore. Is it possible to fix this?
<AgGridReact
stopEditingWhenGridLosesFocus // without this line works fine
columnDefs={this.state.columnDefs}
components={this.state.components}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
/>
Having "stopEditingWhenGridLosesFocus" set to true, when you click on a date, the input tag is gone, so the reference for your datepicker gets lost.
I had the same issue and I solved it doing this:
Change your custom component settings to work in a popup:
Datepicker.prototype.isPopup = function() {
return true;
};
Then, call to stopEditing() method on select event in your datepicker:
$(this.eInput).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
params.stopEditing();
}
});
I have created a new working fork from your example here
stopEditingWhenCellsLoseFocus = true
I am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.
Heres my scenario: I have an index page with 2 radio buttons on it and a span area for results. When one of the radio buttons are clicked, the span fills up with an ajax generated page that has an input box as so :
<input size='25' class='datepicker' value='Click to enter deposit date' READONLY type='text' id='depositDate' name='depositDate'>
At the bottom of this page there is an 'Add Record' button which fires off javascript validation. The validation is so:
var inpDepDate = $.trim($("#depositDate").val());
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
document.getElementById('payDate').focus();
document.getElementById('payDate').select();
return false;
}
Also in my javascript file is :
$(function(){
$( "#depositDate" ).live('focus', function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
minDate: "+1D",
showOtherMonths: true,
selectOtherMonths: true}).focus();
});
});
The problem is when the validation fails, the text does get highlighted and selected but it does not open automatically.
Ive tried a number of things, actually a ton of things from this site, and no luck. And it seems to never recognize the live event. But if I click on the text box after its failed the validation (and the text is highlighted), the calendar opens just fine. Im fairly new at jQuery and ui.
You don't need to reinstantiate the datepicker if you've already called it on #depositDate in the past. (Or on payDate)
Try this:
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
$("#payDate").datepicker("show");
return false;
}