black friday sale

Custom Fields
Re-Envisioned
Support General Date picker conditions

  • Creator
    Topic
  • #22769
    Resolved toni bird
    Participant

    Hi I was wondering if I have 2 date fields (start /finish) can I add a condition to finish date be grater than start date in backend (adm panel)?
    Also is it possible to have a exact copy of a custom field populated automatically. i.e as soon as I add start date, a text field value becomes that date?

    Many thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
    Replies
  • #22779
    Long Nguyen
    Moderator

    Hi Toni,

    The field date does not support adding the minDate base on another field date value. I’m going to create a feature request for the developer team to support this case.

    Regarding the text field is populated by the value of a date field’s value, you can use some simple JavaScript code. start_date and date_to_text are the field IDs.

    add_action( 'admin_footer', function() {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('body').on('change', '#start_date', function() {
                    var startDate = $('#start_date');
                    $('#date_to_text').val(startDate.val());
                });
                
            });
        </script>
        <?php
    } );

    See the screen record https://share.getcloudapp.com/ApuLbJqN.

    #22791
    toni bird
    Participant

    Hi Long,

    Many thanks for you help, can’t wait to get de conditional date based on another date field working….. please let us know when is out…

    I’ve managed to get the javaScript working but only when the “date_to_text” field is outside a group , any chance to work inside groups? Start date is out and date_to_text is inside a group…

    thanks again

    #22795
    Long Nguyen
    Moderator

    Hi Toni,

    Sub-fields in a group have different IDs (HTML attribute id), the format is {group_id}_{field_id}. Assume your group field id is group_date, change the selector in the JavaScript code to:

    $('#group_date_date_to_text').val(startDate.val());

    #22809
    toni bird
    Participant

    Hi Long,

    many thanks, works beautifully…

    regards

    #22810
    toni bird
    Participant

    Hi Long,

    Does it also work with cloned groups?

    thanks

    #22815
    Long Nguyen
    Moderator

    Hi,

    The ID of the field when rendering to HTML code for a cloneable group is very complicated. You can add a custom class to the field text.

    array(
        'name' => 'Group date',
        'id' => 'group_date',
        'type' => 'group',
        'clone' => true,
        'fields' => array(
            array(
                'name' => 'Date To Text',
                'id' => 'date_to_text',
                'type' => 'text',
                'class' => 'date_to_text' // here
            ),
    
        ),
    )

    then change the selector in JavaScript code to

    $('.date_to_text input').val(startDate.val());

    to make all text fields in the cloneable group populate the date from the start date.

    #22821
    toni bird
    Participant

    Hi Long,

    Great, many thanks

    #22823
    toni bird
    Participant

    Hi Long, last doubt/question on this matter.

    If I have the following scenario :

    Group date with a date field that populates the date_to_text field ( just like you told me ) works well within the group. but when I clone this group does not work anymore because all fields get a new name ( i.e. start_date_hlksjdhfk) any way to make the cloned groups to work independently within the group itself? Many thanks

    <?php
    add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
    
    function your_prefix_register_meta_boxes( $meta_boxes ) {
        $prefix = '';
    
        $meta_boxes[] = [
            'title'      => esc_html__( 'testing', 'text-domain' ),
            'id'         => 'testing',
            'post_types' => ['post'],
            'context'    => 'normal',
            'priority'   => 'high',
            'fields'     => [
                [
                    'id'            => $prefix . 'group_date',
                    'type'          => 'group',
                    'name'          => esc_html__( 'Group Date', 'text-domain' ),
                    'fields'        => [
                        [
                            'id'   => $prefix . 'start_date',
                            'type' => 'date',
                            'name' => esc_html__( 'Start_date', 'text-domain' ),
                        ],
                        [
                            'id'    => $prefix . 'date_to_text',
                            'type'  => 'text',
                            'name'  => esc_html__( 'Date to text', 'text-domain' ),
                            'class' => 'date_to_text',
                        ],
                    ],
                    'clone'         => 1,
                    'default_state' => 'expanded',
                    'clone_default' => 1,
                ],
            ],
        ];
    
        return $meta_boxes;
    }
    #22855
    Long Nguyen
    Moderator

    Hi Toni,

    You need to add a class for the start date.

    array(
        'name' => 'Group date',
        'id' => 'group_date',
        'type' => 'group',
        'clone' => true,
        'fields' => array(
            array(
                'name' => 'Date To Text',
                'id' => 'date_to_text',
                'type' => 'text',
                'class' => 'date_to_text'
            ),
            array(
                'name'       => 'Start Date',
                'id'         => 'start_date',
                'type'       => 'date',
    
                // Date picker options. See here http://api.jqueryui.com/datepicker
                'js_options' => array(
                    'dateFormat'      => 'yy-mm-dd',
                    'showButtonPanel' => false,
                ),
                'class' => 'start_date' // here
            ),
    
        ),
    ),

    then change the JavaScript code to:

    $('body').on('change', '.start_date input', function() {
        var startDate = $(this);
        startDate.parents('.rwmb-group-clone').find('.date_to_text input').val(startDate.val());
    });

    See my screen record https://share.getcloudapp.com/d5upZkj0.

    #22872
    toni bird
    Participant

    Many thanks Long, saved my life. regards

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.