cordova-plugin-datepicker
cordova-plugin-datepicker copied to clipboard
VitaliiBlagodir
How to change custom color?
have you managed to find anything to do this? am wanting to change the green header background color.
I have found this!!! In variable.scss file just add date-picker{ <your options like header, body etc> } or try calendar-page{ <your options like header, body etc> }
thank you!! do you mind copy and pasting what yours looks like int he variable.scss file for this? am having trouble writing it correctly for it to not throw errors
Here my full code in varaibale.scss file I hope this will help you!
`// Ionic Variables and Theming. For more info, please see: // http://ionicframework.com/docs/theming/
// Font path is used to include ionicons, // roboto, and noto sans fonts $font-path: "../assets/fonts";
// The app direction is used to include // rtl styles in your app. For more info, please see: // http://ionicframework.com/docs/theming/rtl-support/ $app-direction: ltr;
@import "ionic.globals";
// Shared Variables // -------------------------------------------------- // To customize the look and feel of this app, you can override // the Sass variables found in Ionic's source scss files. // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Named Color Variables // -------------------------------------------------- // Named colors makes it easy to reuse colors on various components. // It's highly recommended to change the default colors // to match your app's branding. Ionic uses a Sass map of // colors so you can add, rename and remove colors as needed. // The "primary" color is the only required color in the map.
$colors: ( primary: rgb(0,170,80), //488aff secondary: rgb(0,170,80), //00aa51 danger: #f53d3d, light: #f4f4f4, dark: #222, lightgrn: #EAEDED, footer_bg: rgba(0,0,0,0.2) ); $toolbar-background: rgb(0,170,80); $searchbar-ios-input-search-icon-color: white; $searchbar-ios-input-text-color: white; $searchbar-ios-input-clear-icon-color: white; $searchbar-ios-input-placeholder-color: rgb(190, 193, 193); $picker-md-option-selected-color: rgb(0,170,80); $picker-md-button-text-color: rgb(0,170,80); $toolbar-md-title-font-size: 17px; $toolbar-ios-title-font-size: 17px;
date-picker{ .selected{ background-color: rgb(0,170,80) !important; color: white !important; border-radius: 10px !important; } .top-banner { background-color: rgb(0,170,80) !important; } .button-inner{ color: rgb(0,170,80) !important; } .calendar-item-container{
} div{ margin: 0 !important; padding-bottom: 2px !important; }
position: absolute !important; overflow: hidden !important; border-radius: 5px !important; width: 90% !important; height: 90% !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: auto !important; border: 0 !important; box-shadow: 0 16px 20px rgba(0,0,0,.4) !important; } calendar-page{ position: absolute !important; overflow: hidden !important; border-radius: 5px !important; width: 90% !important; height: 90% !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: auto !important; border: 0 !important; box-shadow: 0 16px 20px rgba(0,0,0,.4) !important; } ion-toolbar{ li{ color: white !important; } } .month-box { .on-selected { background-color: rgb(0, 170, 80) !important; color: white !important; border-radius: 10px !important; } }
// App iOS Variables // -------------------------------------------------- // iOS only Sass variables can go here
// App Material Design Variables // -------------------------------------------------- // Material Design only Sass variables can go here
// App Windows Variables // -------------------------------------------------- // Windows only Sass variables can go here
// App Theme // -------------------------------------------------- // Ionic apps can have different themes applied, which can // then be future customized. This import comes last // so that the above variables are used and Ionic's // default are overridden.
@import "ionic.theme.default";
// Ionicons // -------------------------------------------------- // The premium icon font for Ionic. For more info, please see: // http://ionicframework.com/docs/ionicons/
@import "ionic.ionicons";
// Fonts // --------------------------------------------------
@import "roboto"; @import "noto-sans"; `
AFAIK the code provided by @AnandKumar2610 just changes the look of the ionic-picker inside of the webview, the plugin provided here offers to use native dialogs to select dates and times.
I described the steps on how to use a custom Android theme with the native pickers here
