Datepicker as a popup

Question

Datepicker as a popup

Closed this issue 7 years ago · 5 comments

Hello,

Can we add this datepicker as a pop instead of a modal? Thanks

Answer 1 · 2017-09-11T04:47:07.000Z

You mean you want to make the modal size smaller? A modal is a popup that just takes the whole screen. You can adjust it via css. Take a look how it will display in iPad size.

…

On Sep 11, 2017 07:43, "Simplelenz" ***@***.***> wrote: Hello, Can we add this datepicker as a pop instead of a modal? Thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#45>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGV4LEI_rRucTiRLdlba0r69Qmgg55eFks5shLpygaJpZM4PSoOD> .

Answer 2 · 2017-09-11T11:14:40.000Z

Yes, I checked it as you mentioned and that is what I want thanks. how to customize the size and other styles? I tried accessing scss variables in the datepicker.component.scss in my pages scss file. But it seems not working. Any help?

Answer 3 · 2017-09-11T12:26:37.000Z

The datepicker component scss is just a help file so I can see the formatting. The real is css is in the datepicker.component.ts in styles. This is because the build process is already complicated and I dont want to make it more complicated.

…

On Sep 11, 2017 14:14, "Simplelenz" ***@***.***> wrote: Yes, I checked it as you mentioned and that is what I want thanks. how to customize the size and other styles? I tried accessing scss variables in the datepicker.component.scss in my pages scss file. But it seems not working. Any help? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGV4LJ2ebFKgF6uxmmMq5yDJVnVUgD0Rks5shRYhgaJpZM4PSoOD> .

Answer 4 · 2017-09-11T13:09:39.000Z

I tried changing the header color using the below code in my pages .scss file
ionic2-datepicker .datepicker-wrapper .datepicker-header { color: white; background-color: #310096; display: flex; flex-flow: column; height: 35%; }
but it is not working. Can't I customize the datepicker by overriding the style variables externally without making changes to the datepicker.component.ts

Answer 5 · 2017-09-11T13:57:11.000Z

Sorry I assumed that you forked the project since you mentioned the scss file.

Here is my overload:

ionic2-datepicker,
ionic2-datepicker .datepicker-wrapper {
    background: linear-gradient(135deg, #172446 0%, #2a3c60 26%, #5393ae 61%, #5393ae 66%, #335e88 81%, #336084 100%);
    .datepicker-header {
        background-color: rgba(0, 0, 0, 0.25)!important;
        .weekday-header {
            background-color: rgba(0, 0, 0, 0.25)!important;
        }
    }
    .button {
        background-color: rgba(0, 0, 0, 0.25)!important;
    }
    .row {
        color: white!important;
        .datepicker-selected {
            color: black;
        }
        .datepicker-current {
            color: #bdbdbd;
        }
    }
}