How to make already open Date-Picker in a modal ?

[Avtarsodhi]

Hey,

I am opening a modal on click the input field and i want the date-picker as an already open Calendar with an hidden input field. I have already tried autofocus on hidden input and trigger click event on input field but it is not going as per my expectations.

Please help me and give my some suggestions to resolve it.

Thanks in advance.

[DanielRuf]

Hi @Avtarsodhi,

Please provide a codepen so we have a working reproducible testcase.

[Avtarsodhi]

Hi @DanielRuf My jsp's code is

and javascript code is- function openDatePickerModal() { $('.picker-modal').openModal(); }'

and pickadate code is- $('#deliveryDatePicker' .pickadate({ formatSubmit: 'dd/mm/yyyy', })

modal code is -

[DanielRuf]

This is not a codepen. Please go to codepen.io and create a working example of your current implementation (only css, js, html).

[DanielRuf]

Did you already try the open method?

https://amsul.ca/pickadate.js/api/#method-open-close

[Avtarsodhi]

how to use pickadate.js in code-pen. it shows the error.

[Avtarsodhi]

@DanielRuf

yeah, i have tried open function but it shows error picker is not defined

[DanielRuf]

Please check the docs at the top:

var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')
picker.methodName(argument1, argument2, ...)

What exactly did you try on codepen?

[DanielRuf]

You have to load picker.js before loading the date.picker.js file:

https://github.com/amsul/pickadate.js/tree/master/lib

[Avtarsodhi]

Thanks @DanielRuf for your quick response.

It works.