Changing the default display of jqxCalender dates

[walker1234Participant]

I am following the same edit functionality as mentioned in this example . I am using the jqxCalender for the following two dates input as shown below:

<div id="popupWindow">
                                                <div>Edit</div>
                                                    <div style="overflow: hidden;">
                                                        <table>
                                                            <tr>
                                                                <td align="right">Name:</td>
                                                                <td align="left"><input id="attributeName" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right">Start:</td>
                                                                <td align="left"><div id="assignedOnDate" /></div></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right">End :</td>
                                                                <td align="left"><div id="endAssignedOnDate" /></div></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right">Comment:</td>
                                                                <td align="left"><input id="userComment"></td>
                                                            </tr>
                                                             <tr>
                                                                
                                                                <td align="left"><input type="hidden" id="ID"></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"></td>
                                                                <td style="padding-top: 10px;" align="right">
                                                                  <input style="margin-right: 5px;" type="button" id="Save" value="Save" />
                                                                  <input id="Cancel" type="button" value="Cancel" />
                                                                  <input  style="margin-left: 5px;" type="button"  id="Remove" value="Remove" />
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                            </div>

In my javascript code, I am doing like this :

$("#popupWindow").on('open', function () {
                    //$("#attributeName").jqxInput('selectAll');
                    $("#assignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d",  width: '150px', height: '20px' });
                    $("#endAssignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d", width: '150px', height: '20px' });
                });

1st Issue:

For rows, for which I already have start and end date present, when I click on the Edit button for the first time, the dates shown for two calenders are the current dates. However, I want to show the dates which are there on that row and not the current dates in that scenario.

When I cancel the popup window and then click on Edit button again, I could see the actual start and end dates on the popup window. Could you tell me why is it like that?

2nd Issue:

For some rows, I have only start date and no end date. Hence, I would like to show nothing on end date div but calender for such situations from the jqxCalender so that if user wants, he can select a date from the calender and if he doesn’t wants, it should remain empty. However, the calender inserts current date by default. How can I solve this problem?

[HristoParticipant]

Hello walker1234,

This is not an issue. What you want to accomplish is more like a new feature. The way to do it is:
1) I do not see where you try to get data of the Grid with particular rows (need to set this in buttonclick callback as mentioned example).
If you do not set date, the jqxDateTimeInput will set current date (by default).
You could use getcellvalue or getrowdata and when the jqxWindow is open set the concrete value.
To set value in the jqxDateTimeInput could use setDate method.

2) You need to decide what you want to create, this looks as the philosophical issue.
You could focus on that field and open this to choose a date. (Note: In this case will set date.)
In case that you do not want to set a date you could use allowNullDate: true (for the jqxDateTimeInput).

Also, I would like to ask you write in the relevant section. (in jqxGrid or in jqxDateTimeInput)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[walker1234Participant]

Thanks Histro. I have posted my follow up question on this thread at the relevant section you requested .

[Author]

Posts