Materialize: Datepicker not fully visible in model

[kirtangajjar]

Description

When you define your form in a model, and add a datepicker in it, then your when you click on datepicker input, it is not visible fully.

Datepicker should appear in seperate model.

Repro Steps

1. Define a form in modal and add datepicker in form.
2. Open the modal and add then open the datepicker.

Screenshots / Codepen

[tomscholz]

@kirtangajjar
Duplicate to: https://github.com/Dogfalo/materialize/issues/1032
Solution: https://codepen.io/tomscholz/pen/oYEEqV
Make sure that you add container: 'body' to $('.datepicker').pickadate({. Then it will work properly

$('.datepicker').pickadate({
  container: 'body'
})

[kirtangajjar]

@tomscholz thanks :+1:

[cleyton2charm]

$('.datepicker').datepicker({
container: 'body'
})
Works in 2018!

[jigs144379]

Just put below code in jquery load function and change your proper id instead of txtSignatureDate

$('#txtSignatureDate').pickadate({
container: ".modal-body",
format: sdateformate,
selectMonths: true,
selectYears: 15,
onOpen: function () {
$('#txtSignatureDate_root .picker__holder').attr('style', 'height:' + $('#modalTraining .modal-content').innerHeight() + 'px');
//$("#txtSignatureDate_root .picker__frame").attr('style', 'top:' + ($('#modalTraining .modal-content').innerHeight() - 500) + 'px');
},
onSet: function (e) {
if (e.select) {
this.close();
$("#txtSignatureDate_root .picker__holder").removeAttr("style");
$("#txtSignatureDate_root .picker__frame").removeAttr("style");
} else {
$("#txtSignatureDate_root .picker__holder").removeAttr("style");
$("#txtSignatureDate_root .picker__frame").removeAttr("style");

                    }
                }, onClose: function () {
                    $("#txtSignatureDate_root .picker__holder").removeAttr("style");
                    $("#txtSignatureDate_root .picker__frame").removeAttr("style");
                },
            });

for css side add

.picker--opened .picker__frame {
top: 45%;
bottom: auto;
}