Apex Code Development You need to sign in to do that
Don't have an account?
datepicker doesn't work in visualforce page with slds
<div class="slds-form-element slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<label class="slds-form-element__label" for="date-input-id">Date</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<input type="text" id="date-input-id" placeholder=" " class="slds-input" />
<button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Select a date">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#event" />
</svg>
<span class="slds-assistive-text">Select a date</span>
</button>
</div>
<div aria-hidden="false" aria-label="Date picker: June" class="slds-datepicker slds-dropdown slds-dropdown_left" role="dialog">
<div class="slds-datepicker__filter slds-grid">
<div class="slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow">
<div class="slds-align-middle">
<button class="slds-button slds-button_icon slds-button_icon-container" title="Previous Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left" />
</svg>
<span class="slds-assistive-text">Previous Month</span>
</button>
</div>
<h2 aria-atomic="true" aria-live="assertive" class="slds-align-middle" id="month">June</h2>
<div class="slds-align-middle">
<button class="slds-button slds-button_icon slds-button_icon-container" title="Next Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right" />
</svg>
<span class="slds-assistive-text">Next Month</span>
</button>
</div>
</div>
<div class="slds-shrink-none">
<label class="slds-assistive-text" for="select-01">Pick a Year</label>
<div class="slds-select_container">
<select class="slds-select" id="select-01">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<table aria-labelledby="month" aria-multiselectable="true" class="slds-datepicker__month" role="grid">
<thead>
<tr id="weekdays">
<th id="Sunday" scope="col">
<abbr title="Sunday">Sun</abbr>
</th>
<th id="Monday" scope="col">
<abbr title="Monday">Mon</abbr>
</th>
<th id="Tuesday" scope="col">
<abbr title="Tuesday">Tue</abbr>
</th>
<th id="Wednesday" scope="col">
<abbr title="Wednesday">Wed</abbr>
</th>
<th id="Thursday" scope="col">
<abbr title="Thursday">Thu</abbr>
</th>
<th id="Friday" scope="col">
<abbr title="Friday">Fri</abbr>
</th>
<th id="Saturday" scope="col">
<abbr title="Saturday">Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">31</span>
</td>
<td aria-selected="false" role="gridcell" tabindex="0">
<span class="slds-day">1</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">2</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">3</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">4</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">5</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">6</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="slds-day">7</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">8</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">9</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">10</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">11</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">12</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">13</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="slds-day">14</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">15</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">16</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">17</span>
</td>
<td aria-selected="false" aria-current="date" class="slds-is-today" role="gridcell">
<span class="slds-day">18</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">19</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">20</span>
</td>
</tr>
<tr class="">
<td aria-selected="false" role="gridcell">
<span class="slds-day">21</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">22</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">23</span>
</td>
<td aria-selected="false" class="" role="gridcell">
<span class="slds-day">24</span>
</td>
<td aria-selected="false" class="" role="gridcell">
<span class="slds-day">25</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">26</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">27</span>
</td>
</tr>
<tr class="">
<td aria-selected="false" class="" role="gridcell">
<span class="slds-day">28</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">29</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">30</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">1</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">2</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">3</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">4</span>
</td>
</tr>
</tbody>
</table>
<button class="slds-button slds-align_absolute-center slds-text-link">Today</button>
</div>
</div>
https://www.lightningdesignsystem.com/components/datepickers/#contenti am able to see the datepicker on the page, however when i click on date it doesn't work .
Either you need to write your own JS or you can use third party library to make it work
http://aljs.appiphony.com/#!/datepickers (http://aljs.appiphony.com/#!/datepickers )
https://lightningdart.com
Thanks
Arpit
All Answers
Either you need to write your own JS or you can use third party library to make it work
http://aljs.appiphony.com/#!/datepickers (http://aljs.appiphony.com/#!/datepickers )
https://lightningdart.com
Thanks
Arpit
Thanks for the response, i tried to use the jquery for datepicker it works however i am using actionSupport action="{!RefreshLang}" event="onchange" reRender="op1" , which makes the date picker blocked(or dosent work) when rerendered... any suggestions??
You need to also rerender block of script that initalize your datepicker.
Suppose I have a script
<apex:outputPanel id="scriptPanel">
<script>
//block of code that initialize date picker.
<script>
</apex:outputPanel>
So In your case you need to also rerender reRender="op1,scriptPanel" .
Thanks
Arpit