ui:inputDateTime Behaves Differently in Lightning Component Tab and Visualforce Tab

Question

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.

App used for vf Page is

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

Ashwani Kumar · Accepted Answer · 2017-01-18 12:51:28Z

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.

answered Jan 18, 2017 at 12:51

Ashwani Kumar

6355 silver badges14 bronze badges

Add a comment |

Manjot Singh · Accepted Answer · 2017-02-02 09:45:56Z

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>

Stack Exchange Network

ui:inputDateTime Behaves Differently in Lightning Component Tab and Visualforce Tab

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
visualforce
lightning-aura-components
lightning
lightning-design-system
visualforce-in-lightning
.

Hot Network Questions

ui:inputDateTime Behaves Differently in Lightning Component Tab and Visualforce Tab

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged visualforcelightning-aura-componentslightninglightning-design-systemvisualforce-in-lightning.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
visualforce
lightning-aura-components
lightning
lightning-design-system
visualforce-in-lightning
.