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 😉

  • 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.