Date Picker

[MGA555]

When I searched a website of mine that is using Open-JS Grid, I noticed that many of the Open-JS Grid files reference a date picker. I that functionality provided? If it is, could you describe it briefly and provide an example of how to use it?

[optikalefx]

This isn't in default, but this is a great use for "cell types". See Custom Callbacks and Custom Cell Types on square-bracket.com/openjs

[MGA555]

Thanks for the reply. However, due to my inexperience, I am lost. I looked at the squarebracket site, and did not find any reference to date or picker. I have no idea how the custom call back is used, and in fact I am lost regarding even the simplest past of the EXAMPLE Custom Call Back and Custom Cell Types in that I have no idea how the "Title" column heading appears, and why the third column is labeled "HashBang" and not "TutorialID". Sorry I am so behind the 8 ball, but could you provide a complete example, perhaps as a GitHub topic branch? I suspect a lot or people would find that very helpful.

thanks

[optikalefx]

I'll try to shed some light as much as I can on this. There will be no reference to date picker on the page, but you can use custom cell types to make a date type. Here's how.

       var $grid = $(".demo5").grid({
            editing: true,
            cellTypes : {
                "datepicker": function(value, columnOpts, grid) {
                    return {
                        cellClass: "",
            cellValue: "<input type='text' class='datepicker' value='"+value+"'/>"
            }
        }
        }
    });

       $grid.on("loadComplete",function(e) {
        $(this).find('.datepicker').datepicker();
    });

then in the HTML

<table class="grid demo5" action="ajax.php">
    <tr>    
        <th col="name" type="name">Name</th>
        <th col="date"  type="datepicker">Date</th>
    </tr>
</table>

This code is untested but you get the idea. Basically, you define a cell type called date, which just setups an input field with class date.

Then when the grid loads, you call jQuery UI datepicker (not included) on all those fields.

Finally, in the HTML, you can use your type datepicker that you made in cell types which will render those datepicker fields when the grid renders.