comment 0

UIKit and Datepicker in Modal

Came across this interesting situation while working on a PHP web app. Needed a date picker in a modal. The thing is UIKit has a date picker but not in the latest version/beta. Decided to try jquery-ui date picker but two things happened 1) Click next and previous would close the modal and 2) the next and previous arrow graphic would not show but the area can be clicked. This made me look for other date pickers out there. Found this one t1m0n.name/air-datepicker/docs/. Ordinarily it looks and works well but not in my situation. Below are the problems I faced and how they were dealt with

1) Date picker shows behind modal

datepickers-container {z-index: 100000 !important;}

Force it to the top by setting a really high z-index. Not sure if this is full proof and so will do more research. This is how z-index works

“If not specified by the z-index property, the stacking level of an element is established according to it’s arrangement in the document tree. Elements that are declared later in the document have a higher stacking level by default.”

2) Selecting date closes the modal

$(document).ready(function(){
$(“#datepickers-container”).click( function(event) {
event.stopPropagation();
});

The date pickers get created in a container div that had the id datepickers-container and stopProprogation prevents the modal from receiving the click event after the picker has received it. More on that function here – api.jquery.com/event.stoppropagation/

3) Date picker would not hide after date is selected. So I hide picker with onSelect event.

$(‘#datepicker1’).datepicker({
onSelect: function(formattedDate, date, inst) {
$(‘#datepicker1’).datepicker().data(‘datepicker’).hide();
}});

datepicker1 is the id of the date input.

Share your experiences with us in the comments below. What date picker do you use and how would you handle this situation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s