3 Replies Latest reply on Feb 13, 2019 11:19 AM by Satupled

    Setting minDate on Datepicker moves icon

    Jeremy Webb

      Hi,

       

      I am running Apex 18.1 and have two date fields, a start date and end date.

       

      When I set the start date, I then need to make the end date use that start date as its minDate.

       

      So I use the following on a onChange dynamic action

       

      var minDate = apex.item('P64_START').getValue();

      $("#P64_END").datepicker("option","minDate",minDate);

       

      This correctly set the minDate for the P64_END item, however the Datepicker icon moves from the right side of the input field to the left hand side of the input. See attached screenshots.

       

      Any ideas how to either

      1. Stop the icon moving

      2. Or to put the icon back to the righthand side of the input.

       

      Thanks,

       

      Jeremy

        • 1. Re: Setting minDate on Datepicker moves icon
          -Max-

          Hello Jeremy

           

          I blogged about this some time ago:

          https://max-tremblay.blogspot.com/2018/03/datepicker-customization.html

           

          You only need to re-add the APEX's CSS class to the datepicker's button after changing an option.

          So your code would look like this:

          var minDate = apex.item('P64_START').getValue();
          $("#P64_END").datepicker("option","minDate",minDate).next('button').addClass('a-Button a-Button--calendar');
          

           

          You could even (and probably should) wrap that fix in a function so that it can be global and also easier to maintain.

           

          Regards

          Max

          • 2. Re: Setting minDate on Datepicker moves icon
            Satupled

            Hi Max.

             

            Thanks for the solution; however, I have a problem.

             

             

            1. If dynamic action Setting "Fire on Initialization" to Yes, Mindate is setting correctly, but the column value is not displayed.

             

             

             

            Setting complete.PNGSetting complete 2.PNG

             

             

            2. If dynamic action Setting "Fire on Initialization" to No, minDate does not setting and column value is displayed.

             

            Setting complete 3.PNGSetting complete 4.PNG

             

            What's is wrong in dynamic action?

             

            Any help will be appreciated.

             

            Regards.

             

            Jairo

            • 3. Re: Setting minDate on Datepicker moves icon
              Satupled

              Hi.

               

              I believe that the solution is save previously value of target datepicker, set (minDate or maxDate) and then recover value saved.

               

              var minDate = apex.item('P64_START').getValue();

              //Saving previous date

              var dateend = $v("P64_END");

              //Setting for maxDate

              $("#P64_END").datepicker("option","minDate",minDate).next('button').addClass('a-Button a-Button--calendar');

              //Recovering previous date

              $s("P64_END", dateend);

               

              Regards.

               

              Jairo