Dual Date Picker erratic behaviour

Michal Szymanski staff answered 7 years ago

Please insert min. 20 characters.

Since 4.0.1 it's enough to use the following code:

<div class="md-form">
            <input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker">
            <label for="input_from">Try me…</label>
        </div>

        <div class="md-form">
            <input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker">
            <label for="input_to">Try me…</label>
        </div>

<script>
        $('.datepicker').pickadate();
    </script>

Add comment

sirdante pro answered 7 years ago

0 0 Best answer

Michal Szymanski

<blockquote>
<script>
        $.extend($.fn.pickadate.defaults, {
            onRender: function () {
                $('.picker__header').prepend('');
            }
        });

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)
            }
        })
    </script>
</blockquote>

no longer works properly in 4.0.1
"input_to" not show the blocked days to "input_from".

Please insert min. 20 characters.

Michal Szymanski

<div class="md-form"> <input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker"> <label for="input_from">Try me...</label> </div> <div class="md-form"> <input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker"> <label for="input_to">Try me...</label> </div>

<script> $.extend($.fn.pickadate.defaults, { onRender: function () { $('.picker__header').prepend(''); } }); 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) } }) </script>

no longer works properly in 4.0.1 "input_to" not show the blocked days to "input_from".

Add comment

Dave Fernandes free answered 8 years ago

0 0 Best answer

Hi Michal, Thanks a lot for you help. That really helped to sort it out. Actually, all i used was this bit. $.extend($.fn.pickadate.defaults, { onRender: function () { $('.picker__header').prepend(''); } }); It hides the blue header, which isnt important. Thanks again

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

Now I see the issue. We'll probably fix it in the future, but it requires quite deep digging into a date picker.

Right now I can offer you solution for setting 2 date pickers which work correctly, but don't have a blue header.

Try this code:

<pre><code><script>
        $.extend($.fn.pickadate.defaults, {
            onRender: function () {
                $('.picker__header').prepend('');
            }
        });

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)
            }
        })
    </script></code></pre>

Please insert min. 20 characters.

Now I see the issue. We'll probably fix it in the future, but it requires quite deep digging into a date picker. Right now I can offer you solution for setting 2 date pickers which work correctly, but don't have a blue header. Try this code:

<div class="md-form">
            <input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker">
            <label for="input_from">Try me...</label>
        </div>

        <div class="md-form">
            <input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker">
            <label for="input_to">Try me...</label>
        </div>

<script>
        $.extend($.fn.pickadate.defaults, {
            onRender: function () {
                $('.picker__header').prepend('');
            }
        });

        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)
            }
        })
    </script>

Add comment

Dave Fernandes free answered 8 years ago

0 0 Best answer

Hi Michal, Thanks for the reply. I've tried it out. Still showing the double calendar. Well, i dont want it to necessarily be a from-date and to-date. I just want to input two different date fields in my form. Date 1 and Date 2. Have no relation to each other. It sort of considers both the date-inputs to belong to the same instance. Does not consider them as 2 separate values. I hope I am making sense in explaining it. Thanks again.

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

If you want to set a date "from" - "to" try to use this code:

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)
  }
})

Add comment