8 Replies Latest reply: Mar 1, 2013 2:14 AM by Tom Petrus RSS

    Date Picker in a Tabular Form

    userKaren
      Is there a way to use the minimum and maximum dates in date picker in a tabular form? It does not appear that this is available in a tabular form and I am finding it very difficult to come up with a way to limit the date selection to a particular month when using the tabular form. Any suggestions would be appreciated.
        • 1. Re: Date Picker in a Tabular Form
          Tom Petrus
          It is possible, but if you need help on implementing it in your form you will need to provide some more details. Is there a min and max per row or not? If yes, are these columns in the form? Are they hidden or editable?
          Since datepickers are jQuery UI components, it is possible to alter their options as such.
          For example, in a tabular form on EMP, column hiredate which is defined as a date, this would restrict the datepicker in row 1 to dates ranging from 16 to 19 november 81.
          $("td[headers='HIREDATE']:eq(0) input").datepicker("option", "minDate", "16-NOV-81");
          $("td[headers='HIREDATE']:eq(0) input").datepicker("option", "maxDate", "19-NOV-81");
          • 2. Re: Date Picker in a Tabular Form
            userKaren
            Thanks for this info.
            Rather then trying to explain, I put together something on http://apex.oracle.com/pls/apex/f?p=4550:1
            WKSP is CLOUDS
            USER is COLLINKJ@POTSDAM.EDU
            PSWD demo

            Date Picker in Tabular Form app. There are 2 pages and 2 tables (Master and Detail). The Master would have one record per month for each person. The detail has one record for each day the person travels during the month. The user chooses a month on page 1 and then fills in the detail on page 2 for that month. The problem is that I cannot restrict the date picker to the month that the user selected which is an item on Page 2. So where you use a literal string for the date comparison, I need to use the first and last day of the chosen month.

            Appreciate r your help.
            • 3. Re: Date Picker in a Tabular Form
              Tom Petrus
              Karen,

              I created 2 extra hidden items on page 2, P2_MASTER_MONTH_MINDATE and P2_MASTER_MONTH_MAXDATE.

              1 dynamic action, after refresh of tabular form region. True action to execute javascript, fire on page load checked.
              $("td[headers='DETAIL_DATE'] input")
              .datepicker("option","changeMonth",false)
              .datepicker("option","minDate",$v("P2_MASTER_MONTH_MINDATE"))
              .datepicker("option","maxDate",$v("P2_MASTER_MONTH_MAXDATE"));
              That will restrict all the datepickers for the "Detail Date" column to the month of the master record.
              • 4. Re: Date Picker in a Tabular Form
                userKaren
                Thank You very much for taking the time to show me how to do this!
                • 5. Re: Date Picker in a Tabular Form
                  userKaren
                  I failed to mention that I am using Apex 4.0.2 and your solution in the cloud as you know was in 4.2. When I put your solution into my 4.0.2 production environment, I could not get it to work after checking everything. It appears to me that it is not being triggered.

                  I noted that the 'Add Row' for the tabular form in 4.0.2 uses javascript:addRow() whereas the 'Add Row' in 4.2 uses javascript:apex.widget.tabular.addRow();


                  I tried using javascript:apex.widget.tabular.addRow(); in 4.0.2 but it does not add a row and did nothing.

                  Do you have any advice on how I can get this to trigger in 4.0.2 if it is indeed possible? I've been experimenting to no avail.
                  • 6. Re: Date Picker in a Tabular Form
                    Tom Petrus
                    So the datepickers are not being restricted?
                    I'm not sure why you're mentioning the addRow() method, as you did not mention that originally. You probably want to trigger the datepicker restriction after adding a new row? Is it this which is not working, or does it not work at all?
                    • 7. Re: Date Picker in a Tabular Form
                      userKaren
                      The datepickers are not being restricted.
                      Mentioned the addRow() method only because I was looking for anything that was different in the versions and I thought that might have something to do with how the refresh is done.


                      But now the weird thing is the cloud solution that you coded in 4.2 is no longer working. It worked the first time I went into it and now it is not restricting the date.
                      Don't think anything changed.
                      • 8. Re: Date Picker in a Tabular Form
                        Tom Petrus
                        I hadn't accounted for the addRow, and datepickers on newly added rows are indeed not restricted. Datepickers on existing rows are still being restricted, but since you had no rows there anymore you could only add rows.
                        Could it be that in your local solution you have no rows too, and thus can only add rows, which has no date restriction?

                        To restrict the datepicker for new rows I changed the "Add Row" button's URL. In 4.2 I'd set it to be defined by a dynamic action, but since you're on 4.0 I set the URL to:
                        javascript:myAddRow();
                        In the page edit i added this to "Javascript > Function and Global Variable Declaration"
                        function myAddRow(){
                        apex.widget.tabular.addRow();
                        $("td[headers='DETAIL_DATE'] input:last")
                        .datepicker("option","changeMonth",false)
                        .datepicker("option","minDate",$v("P2_MASTER_MONTH_MINDATE"))
                        .datepicker("option","maxDate",$v("P2_MASTER_MONTH_MAXDATE"));
                        };
                        This will first add a new row, and then the restriction will be applied to the last input item matching the selector. Indeed, on your local instance you will have to change the "apex.widget.tabular.addRow()" to just "addRow();", since the apex.widget.tabular namespace is new in 4.2.

                        Some more notes of importance:
                        - the column header: in the demo your column is "DETAIL_DATE". If this column is called differently in your local solution, you will need to change the jQuery selector to reflect this!
                        - the P2_MASTER_MONTH_MIN/MAXDATE columns do some date arithmetic. It is important to take a look at their value if the datepicker is not being restricted, and also what language your application runs in. The default english application will set a date format for the jQuery datepicker to be dd-M-y, and it will take '01-JAN-2013' as a valid value. If your field however would contain something like '01/01/2013' it would not work. So for safety, take a look at the values of these items!