Skip to Content (Press Enter)
2019-10-21 07-27-24
Zaw Phone Thet
92Views
3Comments
Solved
Mobile Date picker UI customization
Question
Mobile
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.

0
0
13 Oct 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

1
0
20 Oct 2021
Copy Link
2019-10-21 07-27-24
Zaw Phone Thet

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.

0
0
22 Oct 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

Replying to Phone's comment on 22 Oct 2021 07:45:17

You're welcome.

Glad to help you :)


Kind regards,

Benjith Sam

0
0
22 Oct 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.