Support

Account

Home Forums ACF PRO Start date and End date date-picker field validation

Solved

Start date and End date date-picker field validation

  • I have two date-picker fields. I am using them as start date and end date, but the problem is i can choose end date before the start date that means end date is less than start date.

    I want to do some validation or anything, after selecting the start date, end date date picker should not select the date previous the date of start date.

    i want same as below :

    
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Datepicker - Select a Date Range</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        var dateFormat = "mm/dd/yy",
          from = $( "#from" )
            .datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 1
            })
            .on( "change", function() {
              to.datepicker( "option", "minDate", getDate( this ) );
            }),
          to = $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1
          })
          .on( "change", function() {
            from.datepicker( "option", "maxDate", getDate( this ) );
          });
     
        function getDate( element ) {
          var date;
          try {
            date = $.datepicker.parseDate( dateFormat, element.value );
          } catch( error ) {
            date = null;
          }
     
          return date;
        }
      } );
      </script>
    </head>
    <body>
    
    <label for="from">From</label>
    <input type="text" id="from" name="A">
    <label for="to">to</label>
    <input type="text" id="to" name="B">
    
    </body>
    </html>
    
  • i did resolved it. Now user can not choose the start date greater than end date. I simply add a function in my functions.php file.

    
    //  Date Picker Validation --- Start Date should be less than End Date.
    
        add_action('acf/validate_save_post', 'my_acf_validate_save_post', 10, 0);
    
        function my_acf_validate_save_post()
        {
    
            $start = $_POST['acf']['key of datepicker 1'];
            $start = new DateTime($start);
    
            $end = $_POST['acf']['key of datepicker 2'];
            $end = new DateTime($end);
    
            // check custom $_POST data
                if ($start > $end) {
                    acf_add_validation_error('name of datepicker field you want to display error message. ', 'End Date should be greater than or Equal to Start Date');
                }
        }
    

    In this i have select two datepicker and then converted them to date format then compared them as you can see above.

    * You can get key of ACF field from sreen option and then selecting field keys
    * You can select the name of the field by inspecting in chrome and selecting the datepicker input field.

  • Nice – works fine.
    But I have one problem when I use the validation in a custom plugin of mine.
    Every Time I turn it on and off i received an error

    Undefined index: field_xxx (start date)
    Undefined index: field_yyy (end date)

    How do I fix this?

  • @morten_hjemmesider
    What version of ACF are you useing? There is difference between ACF 4 and 5. ACF 4 uses $_POST[‘fields’] instead of $_POST[‘acf’]
    Other than that, double check your field keys.

  • The validation works fine 🙂
    My problems appear because I have made a plugin settings page with ACF select boxes.
    If the box isn’t checked then the required php file will not be loaded

    In my plugin-name.php file I have

    
    if( $hc_custom_options && in_array('Event', $hc_custom_options) ) {
    require_once ('files/acf-event-fields.php');
    };
    

    The validation is on the files/acf-event-fields.php

    Unchecking the select box fires the error

    hope you understand my poor english … and my PHP skills 😉

    • Alfred

    • August 10, 2019 at 6:47 pm

    The answer from @questioner is working.

    Here is a picture of how to get the key of the date picker.

    date picker key

    I implemented it on this website and it is working
    https://mipon.org/events/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.