Is there any way to render an ig Control as Calender as in left top pane of outlook's Calender Option.
(attached is the snap shot of expected display.)
Hi pardeepkgupta,
In order to show drop-down calendar, the igDatePicker internally uses the $.datepicker. The architecture of $.datepicker is based on a single calendar shared between all instances of datepickers. That means that is not possible to show 2 or more calendars at the same time. Application potentially can permanently display a calendar for a particalar instance of datepicker. But that also means that it can not have second datepicker or igDatePicker on the same page.
To disable automatic hiding of calendar, you may try to hack into $.datepicker and override/kill its member method which hides calendar.
Below is example for you (that is not a suggestion, and no help for any side effects of misbehavior):
<script type="text/javascript"> $(function () { $('#dp1').igDatePicker({height: '4px'}).igDatePicker('dropDownVisible', true).hide(); $.datepicker._hideDatepicker = function () {}; });</script><span id="dp1"></span>
Hi,
I want to use igDatePicker for one DateTime type column of igGrid.
It should work on Edit cell and Add new row as well.
I don't want to use the editorType - 'datePicker', as I want user to be able to enter or change the time along with the Date selected.
Is there any way?
Please help.
Thanks,
Swati.
Hi Swati,
It is not clear to me what feature you asked for. By default the igGrid uses igEditor with type:'date' for columns with Date objects. That editor does not have drop-down calendar (date-picker).
If application would like to use date-picker or to have different format, appearance, etc, then it should use columnSettings for igGridUpdating.
Below is example to use date editor with custom date format/pattern.
$("#grid").igGrid({ ... features: [{ name: 'Updating', columnSettings: [{ columnKey: "MyDateColumn", editorType: 'date', editorOptions: { dateInputFormat: 'yyyy-MM-dd HH:mm' } }] }] });
Exactly the same can be applied to date-picker. So, editor will have date-time pattern and drop-down calendar.
$("#grid").igGrid({ ... features: [{ name: 'Updating', columnSettings: [{ columnKey: "MyDateColumn", editorType: 'datepicker', editorOptions: { button: 'spin,dropdown', dateInputFormat: 'M/d/yyyy, h:mm tt' } }] }] });
Hi Viktor,
Thank you so much for your quick response.
Above mentioned solution works for me.
Now here is where I am stuck, as I want to send the data to web service like - Date(somenumber), I have to use dataMode: 'date'.
But I also want to show the date in display format : 'MM/dd/yyyy, hh:mm:ss tt', which is not happening in spite of using dateDisplayFormat : 'MM/dd/yyyy, hh:mm:ss tt'.
When I use dataMode:'text', date gets displayed properly in the format I want, but I have to use dataMode:'date' to be able to send the date to webservice in format : Date(somenumber).
Can you please help me get this working.
THanks,
The igGridUpdating and its editors are related only to updating and editing, but not to rendering of grid-cells. In order to change format of rendering, application should use igGrid.columns[i].format or igGrid.columns[i].formatter. Those members should be documented. Below is example:
$("#grid").igGrid({ columns: [ ... { headerText: "Date", key: "MyDateColumn", width: "200px", dataType: "date", format: 'MM/dd/yyyy hh:mm:ss tt' } ], ... });
If you need automatic culture pattern/format, then instead of specific pattern, you may use keywords, likeformat: 'dateTime'