pop-up calendar embedded within an ag-grid cell

Currently, I am utilizing ag-grid to showcase a list of columns. Within these columns, there is one designated for dates.

The objective is to allow users to modify rows and utilize a calendar function to choose specific dates. Once selected, the chosen date will automatically update in the cell.

I am seeking advice on how to make this functionality possible.

In accordance with Ag-grid guidelines, it is recommended to utilize cellEditor instead of cellRenderer when editing a cell and incorporating a calendar for date selection.

To explore examples and learn more about using cellEditor, visit https://www.ag-grid.com/javascript-grid-cell-editing/index.php. They provide detailed demonstrations on integrating Celleditor. Any assistance on enabling a calendar feature for each cell within the 'date' column would be greatly appreciated.

javascriptangularjsdatecalendarag-grid

Answer №1

Just received a response from the ag-grid team regarding date editing options.

Unfortunately, built-in date editing is not available with ag-grid. However, you can create your own custom cell editor for handling dates.

If you're interested in learning more about creating custom cell editors, you can find detailed instructions on this topic at: https://www.ag-grid.com/javascript-grid-.../index.php

Answer №2

Utilizing bootstrap, I have incorporated a property called type="date". Within my "ListDataSource" list, there is a specific file named celDate that includes the following HTML code:


<ul>
    <li>Date Input</li>
</ul>

Upon sending this ListDataSource to api.setRowData(ListDataSource), the grid will generate the date input field automatically.

See you later!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trying to bring in components from directories above

I'm currently facing an issue with importing components from a parent directory into my project. My goal is to be able to use these components across multiple projects, which seems like the most straightforward approach. However, when I attempt this, ...

javascriptreactjsnext.js

Issue with Web Worker functionality in SvelteKit on Firefox version 106.0.5

I've set up a function in my main file like this: const loadWorker = async () => { const SyncWorker = await import("$lib/canvas.worker?worker"); syncWorker = new SyncWorker.default(); syncWorker?.postMessage({}); ...

javascriptnode.jsfirefoxsveltesveltekit

Extracting data from a JQGrid in HTML5 Builder: a beginner's guide

Apologies for asking this question as I couldn't find any relevant posts addressing it specifically in relation to HTML5 builder. I am trying to retrieve the value of the "ID" column, which happens to be the last column among the four, based on the r ...

phpjavascripthtmljqgridhtml5builder

Can Node.js handle parsing this as JSON?

Attempting to parse a small API that returns somewhat invalid JSON. Trying the following approach: var request = require('request'), url = 'urlhere'; request({ url: url }, function(error, response, body) { ...

javascriptjsonnode.js

Any advice on applying jquery CSS to elements contained within a dynamically loaded div element?

element, I have encountered an issue with integrating a PHP file to process and display a table within a blank div element upon clicking a button. Despite applying styles from my style.css file, the jQuery mobile styles do not seem to be taking effect. I ...

javascriptjquerycss

Angular Nested Interface is a concept that involves defining an

Looking for guidance on creating a nested interface for JSON data like this: Any help is appreciated. JSON Structure "toto": { "toto1": [], "toto2": [], "toto3": [], } Interface Definition export interface Itot ...

javascriptangulartypescript

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

javascripthtmlcss

The value retrieved by JQuery attr remains constant

Hey everyone, I'm having an issue with getting the ID from a custom attribute using jQuery. When I try to debug, I keep getting the same value each time. I have an HTML table that lists posts from a database using PHP, each with its own specific ID. ...

javascriptphpjqueryhtml

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Feeling a bit overwhelmed here, hoping this isn't just a repeat issue. I've come across similar problems but none of the solutions seem to be working for me at the moment. I'm currently utilizing react-signature-canvas for allowing users to ...

javascriptreactjsamazon-s3

What is the best way to create separate arrays for every element in my object, containing a total of four arrays to efficiently produce a weekly forecast?

Hey there, I'm back with an update on my ongoing project. I've encountered a major challenge while trying to incorporate a 7-day forecast display in my app. Something along these lines: https://i.stack.imgur.com/xJA4M.png https://i.stack.imgur. ...

javascriptreactjsarraysjsonobject

Guide to implementing a DataTable in MVC4 UI using jQuery

Looking to set up a DataTable using jQuery similar to the one shown in this image: https://i.stack.imgur.com/DNUcd.png I'm not very comfortable with jQuery, so please be patient and avoid asking me what I've tried. I don't know how to stru ...

javascriptc#jqueryangularjsasp.net-mvc

Attempting to display the todo item in the form of <li>, however, the todo.name property is not

I am currently developing a task manager application and have encountered a puzzling issue: When I include the Todo component within the TodoList component and pass the todo item as a prop todo = {name: "ssss", status: false, id: 0.0289828650088 ...

javascriptreactjs

Is it Possible to Utilize Gridster Across Multiple Tabs?

My goal is to build several dashboards using angular-gridster2 in angular 8. Each dashboard will be located within a separate tab, and I am currently encountering some issues with this setup. For example, if the first tab has 3 gridster items and the sec ...

javascriptangulartypescriptangular8angular-gridster2

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

Here is the mongoose Schema setup in models/user.js: const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ loginId: String, firstname: String, lastname: String, eMail: String, password: String, acti ...

javascriptnode.jsmongodbexpressmongoose

Ways to remove newly added tasks using JavaScript function?

I have an existing list of li elements in my HTML that can be deleted using JavaScript. However, whenever I add a new li, the delete function no longer works on the newly added item. I suspect the issue lies within the current implementation of the for loo ...

javascripttypescript

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs

Tips on retrieving ajax variable in php

I'm facing an issue with passing the ajax variable to a php page. While I can successfully alert and display the value, sending it to the php page for deletion is not working as expected. Below is the code I've implemented: AJAX code: functio ...

phpjavascripthtmlajax

View setup in progress

I'm interested in implementing something along these lines: app.config(function($routeProvider){ $routeProvider.when('products/list', { controller: 'ProductListCtrl', templateUrl : 'products/list/view.html', ...

javascriptangularjsangular-routing

Unable to modify the content inside an HTML object using an anchor tag

I am currently working on a project for a client who wants to integrate three websites into a single browser window, allowing them to interact without opening multiple windows. Originally, I thought using iframes would solve the issue, but unfortunately, t ...

javascripthtml

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

https://i.stack.imgur.com/PpFlB.pngI currently have multiple Arrays containing various inputs this.listNumber = [ { "GenericQuestions": [ { "input": "long", }, { "input": & ...

javascriptangularjstypescript