Mobile Date picker UI customization
Question
Application Type
Mobile

Hello experts,

how can I achieve this UI in Date Picker Mobile?


I use this date picker widget and 

The original ui shows like this 


Thank you.

mvp_badge
MVP
Solution

Hi,

Sorry! for the late response. For the given use case I found a solution as follows. 

See this link: Custom_InputDatePicker_IntervalSelection

CSS Snippet:

.is-inrange .pika-button {
    border-radius: 0;
}

.is-startrange .pika-button,
.is-endrange .pika-button {
    border-radius: 50%;
}

.is-startrange {
   background: linear-gradient(90deg, transparent 50%, #e6f0ec 50%);
}

.is-endrange {
   background: linear-gradient(90deg, #e6f0ec 50%, transparent 50%);   
}


I hope this helps you!


Kind regards,

Benjith Sam

Hello Benjith Sam

Sorry for my late reply, according to your given solution, I made some minor changes based on your code to meet the UI.

.is-inrange .pika-button {
    border-radius: 0;
    width: 100%;
    background: #FF8F92;
    color: #fff;
}

.is-startrange .pika-button,
.is-endrange .pika-button {
    border-radius: 50%;
}

.is-startrange {
   background: linear-gradient(90deg, transparent 50%, #FF8F92 50%);
}

.is-endrange {
   background: linear-gradient(90deg, #FF8F92 50%, transparent 50%);   
}

Your solution is so good.

Seriously thank you.

mvp_badge
MVP

You're welcome.

Glad to help you :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.