10

I have created a component TestComponent

<aura:component implements="force:appHostable" >
    <aura:attribute name="today" type="DateTime" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputDateTime aura:id="expdate" label="Today's Date" class="field uiDatePicker--default" value="{!v.today}" displayDatePicker="true" />      
    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/>  

    <div aura:id="msg" class="hide">
        You entered: <ui:outputDate aura:id="oDate" value="" />
    </div>

</aura:component>

css for component is

 .THIS.hide {
    display: none;
 }

 .THIS.btn {
    margin-bottom: 10px;
 }

.THIS label.uiLabel {
    padding-right: 12px;
}

.THIS .field{
  padding: 5px;
  border: 1px solid #dce4ec;
  border-radius: 2px;
}

Now i am using this component in a visualForce Page

<apex:page standardStylesheets="false">
    <apex:includeLightning/>
    <apex:stylesheet value="{!URLFOR($Resource.SLDSv2,'/assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
    <div class = "SLDS">
        <div id="lightning" />
    </div>
    <apex:includeScript value="/lightning/lightning.out.js"/>
    <script>
    $Lightning.use(
            "c:App", 
            function() {
                $Lightning.createComponent(
                    "c:TestComponent",
                    {},
                    "lightning",
                    function(cmp) { 
                    }
                );
            }
        );
    </script>
</apex:page>

After that i had made two tabs One VisualForce Tab and one Lightning Component Tab. But in both these tabs the UI of ui:inputDateTime is different. Is there any way to get same UI in both Lightning Tabs and VisualForce Tab?

You Could see Component by appending '/auradocs' to your Domain Url and then go to reference->components->ui->inputDateTime.

My requirement is to have same UI in VisualForce Tab as in Lightning Component Tab. Images for Lightning and VisualForce are added Below.

enter image description here

enter image description here

App used for vf Page is

<aura:application access="GLOBAL" extends="ltng:outApp">
</aura:application>
1

you can add custom style sheet on visualforce page style tag for calendar div.

salesforce renders calendar div outside lightning Div on visualforce page. Adding css class in TestComponent will not reflect in Calendar of Ui:inputDateTime.

0

I have not found any good solution. But there is a hack you can use . Use following style in any vf page which is using ui:inputDate or ui:inputDateTime component

<style>
    .uiDayInMonthCell--default {
    width: 2rem;
    height: 2rem;
    display: block;
    position: relative;
    min-width: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    }
    a.uiDayInMonthCell--default {
    width: 2rem;
    height: 2rem;
    display: block;
    position: relative;
    min-width: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    font-size:small;
    }
    .uiDatePicker--default {
    margin-top: .25rem;
    padding: 0;
    font-size: .75rem;
    display: none;
    font-weight: 400;
    background: rgb(255, 255, 255);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.16);
    border: 1px solid rgb(216, 221, 230);
    border-radius: .25rem;
    float: left;
    min-width: 240px;
    max-width: 400px;
    transform: translateX(-50%);
    }
    *{
    box-sizing: border-box;
    }
    .uiDatePicker--default .dateBar {
    display: flex;
    position: relative;
    padding: .25rem;
    background-color: white;
    height: 30px;
    }
    .uiDatePicker--default .datepicker__filter--month {
    width: 70%;
    margin-top: 13px;
    display: flex;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 .25rem 0 0;
    }
    .uiDatePicker--default .dateBar .prevLinks {
    float: left;
    text-align: left;
    margin-left: .75rem;
    margin-top: -10px;
    }
    .uiDatePicker--default a {
    text-decoration: none;
    }
    .assistiveText {
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    }
    .uiDatePicker--default .dateBar .nextLinks {
    float: right;
    text-align: right;
    margin-right: .75rem;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    margin-top: -10px;
    }
    .uiDatePicker--default .datepicker__filter--month .monthYear {
    line-height: 16px;
    font-size: .75rem;
    text-transform: uppercase;
    margin-top: -6px;
    font-weight: 100;
    }
    .uiDatePicker--default .datepicker__filter--year {
    width: 30%;
    }
    .uiDatePicker--default .picklist__label {
    font-size: .75rem;
    font-weight: 400;
    }
    .uiDatePicker--default .select {
    -webkit-appearance: none;
    padding: 0 30px 0 14px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…w9IiM1NTY5OEQiIHdpZHRoPSIyNy42IiBoZWlnaHQ9IjIxIi8+DQogIDwvZz4NCjwvc3ZnPg0K);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: .8125rem .8125rem,100% 100%;
    }
    .uiDatePicker--default .select {
    font-family: 'Salesforce Sans',Arial,sans-serif;
    background-color: rgb(255, 255, 255);
    color: rgb(22, 50, 92);
    border: 1px solid rgb(216, 221, 230);
    border-radius: .25rem;
    width: 100%;
    transition: border .1s linear,background-color .1s linear;
    height: 1.875rem;
    }
    button, select {
    text-transform: none;
    }
    button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    }
    *, *:before, *:after {
    box-sizing: border-box;
    }
    user agent stylesheet
    select:not([size]):not([multiple]), select[size="0"], select[size="1"] {
    background-color: buttonface;
    }
    user agent stylesheet
    keygen, select, select[size="0"], select[size="1"] {
    border-radius: 0px;
    border-color: rgb(169, 169, 169);
    }
    user agent stylesheet
    select:not(:-internal-list-box) {
    overflow: visible !important;
    }
    user agent stylesheet
    select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    }
    user agent stylesheet
    keygen, select {
    border-radius: 5px;
    }
    input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
    }
    input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
    }table {
    width: 100%;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    *, *:before, *:after {
    box-sizing: border-box;
    }
    table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
    }
    a.visible.DESKTOP.uiDatePicker--default.uiDatePicker
    .uiDatePicker--default {
    margin-top: .25rem;
    padding: 0;
    font-size: .75rem;
    display: none;
    font-weight: 400;
    }
    thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    user agent stylesheet
    table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
    }
    a.visible.DESKTOP.uiDatePicker--default.uiDatePicker
    .uiDatePicker--default {
    margin-top: .25rem;
    padding: 0;
    font-size: .75rem;
    display: none;
    font-weight: 400;
    }
    tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
    }
    a.visible.DESKTOP.uiDatePicker--default.uiDatePicker
    .uiDatePicker--default {
    margin-top: .25rem;
    padding: 0;
    font-size: .75rem;
    display: none;
    font-weight: 400;
    }
    .uiDatePickerGrid--default th {
    padding: .5rem;
    font-weight: 400;
    color: rgb(84, 105, 141);
    text-align: center;
    text-transform: lowercase;
    }
    caption, th, td {
    text-align: left;
    }
    td, th {
    padding: 0;
    }
    *, *:before, *:after {
    box-sizing: border-box;
    }
    th {
    font-weight: bold;
    text-align: -internal-center;
    }
    td, th {
    display: table-cell;
    vertical-align: inherit;
    }
    tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
    }
    tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    }
    .uiDatePickerGrid--default td {
    padding: .25rem;
    text-align: center;
    }
    caption, th, td {
    text-align: left;
    }
    uiDayInMonthCell--default, .uiDayInMonthCell--default:link, .uiDayInMonthCell--default:visited, .uiDayInMonthCell--default:hover, .uiDayInMonthCell--default:active {
    color: rgb(84, 105, 141);
    }
    .uiDatePicker--default a {
    text-decoration: none;
    }
    .uiDayInMonthCell--default {
    width: 2rem;
    height: 2rem;
    display: block;
    position: relative;
    min-width: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    }
    body.desktop {
    overflow: visible;
    }
    .uiDatePicker--default .dateBar select {   
    font-size: 15px;
    color: rgb(22, 50, 92);
    background-color: white;
    }
    .uiDatePickerGrid--default thead {
    background-color: white;
    }
    .uiDatePickerGrid--default .calGrid th {
        text-transform: capitalize;
    }
    .uiDatePickerGrid--default .calGrid .calRow td {
        border: white;
    }
    a.uiDayInMonthCell--default.desktop:hover, a.uiDayInMonthCell--default.desktop:focus, a.uiDayInMonthCell--default.desktop:active {
        background-color: #e1e1e1;
        text-shadow: 0 0 0 white;
        outline: white;
        box-shadow: 0 0 0 white; 
    }
    .uiDatePickerGrid--default thead {
        border-bottom: 0px 
    }
    .uiDatePicker--default .navLink:hover {
        background-color: white;
        border-color: white;
        outline: none;
        box-shadow: 0px 0px 0px white;
    }

</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.