Date picker conditions

This topic has 10 replies, 2 voices, and was last updated 4 years ago by toni bird.

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

Author

Posts
November 10, 2020 at 6:07 AM #22769

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

Add New Note to this Reply

November 10, 2020 at 3:24 PM #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.

Add New Note to this Reply
November 10, 2020 at 10:09 PM #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

Add New Note to this Reply

November 11, 2020 at 8:51 AM #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());

Add New Note to this Reply

November 11, 2020 at 8:03 PM #22809

toni bird
Participant

Hi Long,

many thanks, works beautifully...

regards

Add New Note to this Reply

November 11, 2020 at 8:54 PM #22810

toni bird
Participant

Hi Long,

Does it also work with cloned groups?

thanks

Add New Note to this Reply

November 12, 2020 at 9:26 AM #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.

Add New Note to this Reply
November 12, 2020 at 9:08 PM #22821

toni bird
Participant

Hi Long,

Great, many thanks

Add New Note to this Reply

November 13, 2020 at 12:48 AM #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;
}
```
Add New Note to this Reply
November 15, 2020 at 10:52 PM #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.

Add New Note to this Reply
November 17, 2020 at 8:50 AM #22872

toni bird
Participant

Many thanks Long, saved my life. regards

Add New Note to this Reply
Author

Posts

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

You must be logged in to reply to this topic.