Setting up Pickadate 'onSet'

Question

I'm trying to setup pickadate on two inputs.When a date is selected on the first input, i would like to set the selected date in the second input if the 2nd is empty.

First I tried to update the value after the first input is selected but something doesn't work correclty.

The configuration of both input is complexe so i would like to do it this way :

$( '#event-begin-date,#event-end-date' ).pickadate({
  min: true,
  max: undefined,
    today: '<?php echo T_("Aujourd\'hui"); ?>',
  clear: '<?php echo T_("Effacer"); ?>',
  close: '<?php echo T_("Fermer"); ?>',
  format: '<?php echo T_("dd/mm/yyyy"); ?>',
  firstDay: <?php echo T_("1"); ?>,
  formatSubmit: '<?php echo T_("dd/mm/yyyy"); ?>'
});


$('#event-begin-date').pickadate({
  onSet: function(thingSet) {
    var picker = $input.pickadate('picker');
    picker.set('select', this.component.item.select.pick );
  }
});

score 1 · Answer 1 · answered May 03 '16 at 14:59

Amsul, the creator of this plugin has made a codepan example for this case: pickadate v3: “from” & “to” dates.

this is the code incase codepen is unavailable:

var from_$input = $('#input_from').pickadate(),
    from_picker = from_$input.pickadate('picker')

var to_$input = $('#input_to').pickadate(),
    to_picker = to_$input.pickadate('picker')


// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) {
  to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') ) {
  from_picker.set('max', to_picker.get('select'))
}

// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) {
  if ( event.select ) {
    to_picker.set('min', from_picker.get('select'))    
  }
  else if ( 'clear' in event ) {
    to_picker.set('min', false)
  }
})
to_picker.on('set', function(event) {
  if ( event.select ) {
    from_picker.set('max', to_picker.get('select'))
  }
  else if ( 'clear' in event ) {
    from_picker.set('max', false)
  }
})

score 0 · Answer 2 · answered Jun 08 '18 at 14:18

For propose solution, pay attention of double declaration of .pickadate() :

var from_$input = $('#input_from').pickadate(),
    from_picker = from_$input.pickadate('picker');

First line will redeclare without any customization which could lead to issue in your code.

A more consise way to proceed using event, and adding data-from or data-to in your input : When you open the modal, event check if there is value in from/to and set on the fly the max/min value

    var from = $(this).data('from'),
        to = $(this).data('to');

    $(this).attr('data-value', $(this).val()).pickadate({
        min: true,
        selectMonths: true,
        selectYears: 3,
        format: 'dd mmm yyyy',
        formatSubmit: 'yyyy-mm-dd',
        hiddenName: true,

        onOpen: function() {
            if(typeof from !== 'undefined' && $('#' + from)) {
                var value = ($('#' + from).val() === '' ? true : $('#' + from).pickadate('picker').get('select'));
                this.set('min', value);
            } else if(typeof to !== 'undefined' && $('#' + to)) {
                var value = ($('#' + to).val() === '' ? false : $('#' + to).pickadate('picker').get('select'));
                this.set('max', value);
            }
        }
    });

Setting up Pickadate 'onSet'

2 Answers2