github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update vc-calendar

pull/666/head
tangjinzhou 2019-01-23 22:47:44 +08:00
parent 181399624a
commit 8bec6708d6
22 changed files with 382 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/__tests__/__snapshots__/other.test.js.snap
View File

@ -53,7 +53,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div tabindex="0" class="ant-calendar ant-calendar-week-number ant-calendar-picker-container-content">
<div class="ant-calendar-panel">
<div class="ant-calendar-date-panel">
<div tabindex="0" class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;"><a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a><a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">1月</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2000</a></span><a title="Next month (PageDown)" class="ant-calendar-next-month-btn"></a><a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a></div>
</div>

178
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`Locale Provider set moment locale when locale changes 1`] = `
<div class="ant-calendar-input-wrap" showclear="true">
<div class="ant-calendar-date-input-wrap"><input placeholder="请选择日期" class="ant-calendar-input "></div>
</div>
<div class="ant-calendar-date-panel">
<div tabindex="0" class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;"><a role="button" title="上一年 (Control键加左方向键)" class="ant-calendar-prev-year-btn"></a><a role="button" title="上个月 (翻页上键)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-ym-select"><a role="button" title="选择年份" class="ant-calendar-year-select">2017年</a><a role="button" title="选择月份" class="ant-calendar-month-select">9月</a></span><a title="下个月 (翻页下键)" class="ant-calendar-next-month-btn"></a><a title="下一年 (Control键加右方向键)" class="ant-calendar-next-year-btn"></a></div>
</div>
@ -188,7 +188,7 @@ exports[`Locale Provider set moment locale when locale changes 2`] = `
<div class="ant-calendar-input-wrap" showclear="true">
<div class="ant-calendar-date-input-wrap"><input placeholder="Sélectionner une date" class="ant-calendar-input "></div>
</div>
<div class="ant-calendar-date-panel">
<div tabindex="0" class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;"><a role="button" title="Année précédente (Ctrl + gauche)" class="ant-calendar-prev-year-btn"></a><a role="button" title="Mois précédent (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choisissez un mois" class="ant-calendar-month-select">9月</a><a role="button" title="Choisissez une année" class="ant-calendar-year-select">2017</a></span><a title="Mois suivant (PageDown)" class="ant-calendar-next-month-btn"></a><a title="Année prochaine (Ctrl + droite)" class="ant-calendar-next-year-btn"></a></div>
</div>
@ -366,7 +366,7 @@ exports[`Locale Provider set moment locale when locale changes 3`] = `
<div class="ant-calendar-input-wrap" showclear="true">
<div class="ant-calendar-date-input-wrap"><input placeholder="Select date" class="ant-calendar-input "></div>
</div>
<div class="ant-calendar-date-panel">
<div tabindex="0" class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;"><a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a><a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">Sep</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2017</a></span><a title="Next month (PageDown)" class="ant-calendar-next-month-btn"></a><a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a></div>
</div>
@ -12177,7 +12177,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="set" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">set</div>
<div title="Set" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Set</div>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
@ -12199,43 +12199,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</thead>
<tbody class="ant-fullcalendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="28 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="28 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="29 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="29 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="30 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="30 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="31 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<td role="gridcell" title="31 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">31</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="1 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="1 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="2 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="2 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="3 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="3 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
@ -12243,43 +12243,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="4 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="4 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="5 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="5 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="6 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="6 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="7 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="7 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="8 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="8 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="9 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="9 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="10 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="10 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
@ -12287,43 +12287,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="11 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="11 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">11</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="12 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="12 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">12</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="13 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="13 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">13</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="14 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="14 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">14</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="15 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="15 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">15</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="16 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="16 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">16</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="17 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="17 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">17</div>
<div class="ant-fullcalendar-content"></div>
@ -12331,43 +12331,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</td>
</tr>
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
<td role="gridcell" title="18 de setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<td role="gridcell" title="18 de Setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">18</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="19 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="19 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">19</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="20 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="20 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">20</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="21 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="21 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">21</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="22 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="22 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">22</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="23 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="23 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">23</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="24 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="24 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">24</div>
<div class="ant-fullcalendar-content"></div>
@ -12375,43 +12375,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="25 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="25 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">25</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="26 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="26 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">26</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="27 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="27 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="28 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="28 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="29 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="29 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="30 de setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<td role="gridcell" title="30 de Setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="1 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="1 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
@ -12419,43 +12419,43 @@ exports[`Locale Provider should display the text as pt 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="2 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="3 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="3 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="4 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="4 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="5 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="5 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="6 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="6 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="7 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="7 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="8 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="8 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
@ -12576,7 +12576,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="set" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">set</div>
<div title="Set" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Set</div>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
@ -12598,43 +12598,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</thead>
<tbody class="ant-fullcalendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="27 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="27 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="28 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="28 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="29 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="29 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="30 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<td role="gridcell" title="30 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="31 de agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<td role="gridcell" title="31 de Agosto de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">31</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="1 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="1 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="2 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="2 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
@ -12642,43 +12642,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="3 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="3 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="4 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="4 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="5 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="5 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="6 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="6 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="7 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="7 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="8 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="8 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="9 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="9 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
@ -12686,43 +12686,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="10 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="10 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="11 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="11 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">11</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="12 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="12 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">12</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="13 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="13 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">13</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="14 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="14 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">14</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="15 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="15 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">15</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="16 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="16 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">16</div>
<div class="ant-fullcalendar-content"></div>
@ -12730,43 +12730,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</td>
</tr>
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
<td role="gridcell" title="17 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="17 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">17</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="18 de setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<td role="gridcell" title="18 de Setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">18</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="19 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="19 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">19</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="20 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="20 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">20</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="21 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="21 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">21</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="22 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="22 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">22</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="23 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="23 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">23</div>
<div class="ant-fullcalendar-content"></div>
@ -12774,43 +12774,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="24 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="24 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">24</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="25 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="25 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">25</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="26 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="26 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">26</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="27 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="27 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="28 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="28 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="29 de setembro de 2017" class="ant-fullcalendar-cell">
<td role="gridcell" title="29 de Setembro de 2017" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="30 de setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<td role="gridcell" title="30 de Setembro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
@ -12818,43 +12818,43 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="1 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="1 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="2 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="2 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="3 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="3 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="4 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="4 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="5 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="5 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="6 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="6 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="7 de outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<td role="gridcell" title="7 de Outubro de 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>

25
components/vc-calendar/assets/index/DecadePanel.less
View File

@ -7,6 +7,8 @@
z-index: 10;
position: absolute;
outline: none;
display: flex;
flex-direction: column;
}
.@{prefixClass}-decade-panel-hidden {
@ -37,15 +39,14 @@
}
}
.@{prefixClass}-decade-panel-prev-century-btn,
.@{prefixClass}-decade-panel-next-century-btn {
.@{prefixClass}-decade-panel-prev-century-btn, .@{prefixClass}-decade-panel-next-century-btn {
position: absolute;
top: 0;
}
.@{prefixClass}-decade-panel-next-century-btn {
&:after {
content: '»';
content: '»'
}
}
@ -53,7 +54,7 @@
user-select: none;
left: 0;
&:after {
content: '«';
content: '«'
}
}
@ -63,10 +64,13 @@
}
.@{prefixClass}-decade-panel-body {
flex: 1;
padding: 9px 10px 10px;
position: absolute;
bottom: 0;
top: 34px;
}
.@{prefixClass}-decade-panel-footer {
border-top: 1px solid #ccc;
line-height: 38px;
}
.@{prefixClass}-decade-panel-table {
@ -107,11 +111,10 @@
}
}
.@{prefixClass}-decade-panel-last-century-cell,
.@{prefixClass}-decade-panel-next-century-cell {
.@{prefixClass}-decade-panel-decade {
.@{prefixClass}-decade-panel-last-century-cell, .@{prefixClass}-decade-panel-next-century-cell {
.@{prefixClass}-decade-panel-decade{
user-select: none;
-webkit-user-select: none;
color: rgba(0, 0, 0, 0.25);
}
}
}

30
components/vc-calendar/assets/index/MonthPanel.less
View File

@ -1,12 +1,18 @@
.@{prefixClass}-month-panel {
left: 0;
top: 0;
top:0;
bottom: 0;
right: 0;
background: #ffffff;
z-index: 10;
position: absolute;
outline: none;
> div {
height: 100%;
display: flex;
flex-direction: column;
}
}
.@{prefixClass}-month-panel-hidden {
@ -37,15 +43,14 @@
}
}
.@{prefixClass}-month-panel-prev-year-btn,
.@{prefixClass}-month-panel-next-year-btn {
.@{prefixClass}-month-panel-prev-year-btn, .@{prefixClass}-month-panel-next-year-btn {
position: absolute;
top: 0;
}
.@{prefixClass}-month-panel-next-year-btn {
&:after {
content: '»';
content: '»'
}
}
@ -54,7 +59,7 @@
left: 0;
&:after {
content: '«';
content: '«'
}
}
@ -72,10 +77,13 @@
}
.@{prefixClass}-month-panel-body {
flex: 1;
padding: 9px 10px 10px;
position: absolute;
top: 34px;
bottom: 0;
}
.@{prefixClass}-month-panel-footer {
border-top: 1px solid #ccc;
line-height: 38px;
}
.@{prefixClass}-month-panel-table {
@ -88,6 +96,8 @@
.@{prefixClass}-month-panel-cell {
text-align: center;
.@{prefixClass}-month-panel-month {
display: block;
width: 46px;
@ -106,7 +116,7 @@
}
}
&-disabled {
&-disabled{
.@{prefixClass}-month-panel-month {
color: #bfbfbf;
@ -131,4 +141,4 @@
.@{prefixClass}-month-header-wrap {
position: relative;
height: 308px;
}
}

29
components/vc-calendar/assets/index/YearPanel.less
View File

@ -7,6 +7,12 @@
z-index: 10;
position: absolute;
outline: none;
> div {
height: 100%;
display: flex;
flex-direction: column;
}
}
.@{prefixClass}-year-panel-hidden {
@ -37,15 +43,14 @@
}
}
.@{prefixClass}-year-panel-prev-decade-btn,
.@{prefixClass}-year-panel-next-decade-btn {
.@{prefixClass}-year-panel-prev-decade-btn, .@{prefixClass}-year-panel-next-decade-btn {
position: absolute;
top: 0;
}
.@{prefixClass}-year-panel-next-decade-btn {
&:after {
content: '»';
content: '»'
}
}
@ -54,7 +59,7 @@
left: 0;
&:after {
content: '«';
content: '«'
}
}
@ -72,10 +77,13 @@
}
.@{prefixClass}-year-panel-body {
flex: 1;
padding: 9px 10px 10px;
position: absolute;
bottom: 0;
top: 34px;
}
.@{prefixClass}-year-panel-footer {
border-top: 1px solid #ccc;
line-height: 38px;
}
.@{prefixClass}-year-panel-table {
@ -117,11 +125,10 @@
}
}
.@{prefixClass}-year-panel-last-decade-cell,
.@{prefixClass}-year-panel-next-decade-cell {
.@{prefixClass}-year-panel-year {
.@{prefixClass}-year-panel-last-decade-cell, .@{prefixClass}-year-panel-next-decade-cell {
.@{prefixClass}-year-panel-year{
user-select: none;
-webkit-user-select: none;
color: rgba(0, 0, 0, 0.25);
}
}
}

3
components/vc-calendar/demo/antd-calendar.vue
View File

@ -211,6 +211,7 @@ const DemoMultiFormat = {
format={multiFormats}
value={state.value}
onChange={this.onChange}
focusablePanel={false}
/>
</div>);
},
@ -251,7 +252,7 @@ export default {
onChange={onStandaloneChange}
disabledDate={disabledDate}
onSelect={onStandaloneSelect}
renderFooter={() => 'extra footer'}
renderFooter={(mode) => (<span>{mode} extra footer</span>)}
/>
</div>
<div style={{ float: 'left', width: '300px' }}>

5
components/vc-calendar/index.js
View File

@ -1,3 +1,8 @@
// based on rc-calendar 9.8.2
import Vue from 'vue';
import ref from 'vue-ref';
import Calendar from './src/';
Vue.use(ref, { name: 'ant-ref' });
export default Calendar;

78
components/vc-calendar/src/Calendar.jsx
View File

@ -3,27 +3,17 @@ import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp, getComponentFromProp } from '../../_util/props-util';
import { cloneElement } from '../../_util/vnode';
import KeyCode from '../../_util/KeyCode';
import * as moment from 'moment';
import moment from 'moment';
import DateTable from './date/DateTable';
import CalendarHeader from './calendar/CalendarHeader';
import CalendarFooter from './calendar/CalendarFooter';
import CalendarMixin from './mixin/CalendarMixin';
import CalendarMixin, {getNowByCurrentStateValue} from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin';
import DateInput from './date/DateInput';
import enUs from './locale/en_US';
import { getTimeConfig, getTodayTime, syncTime } from './util';
import { goStartMonth, goEndMonth, goTime } from './util/toTime';
function isMoment(value) {
if (Array.isArray(value)) {
return (
value.length === 0 || value.findIndex(val => val === undefined || moment.isMoment(val)) !== -1
);
} else {
return value === undefined || moment.isMoment(value);
}
}
const MomentType = PropTypes.custom(isMoment);
const Calendar = {
props: {
locale: PropTypes.object.def(enUs),
@ -31,9 +21,10 @@ const Calendar = {
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
// prefixCls: PropTypes.string,
defaultValue: MomentType,
value: MomentType,
selectedValue: MomentType,
defaultValue: PropTypes.object,
value: PropTypes.object,
selectedValue: PropTypes.object,
defaultSelectedValue: PropTypes.object,
mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
// locale: PropTypes.object,
showDateInput: PropTypes.bool.def(true),
@ -54,21 +45,48 @@ const Calendar = {
renderFooter: PropTypes.func.def(() => null),
renderSidebar: PropTypes.func.def(() => null),
clearIcon: PropTypes.any,
focusablePanel: PropTypes.bool.def(true),
},
mixins: [BaseMixin, CommonMixin, CalendarMixin],
data() {
const props = this.$props;
return {
sMode: this.mode || 'date',
sValue: props.value || props.defaultValue || moment(),
sSelectedValue: props.selectedValue || props.defaultSelectedValue,
};
},
watch: {
mode(val) {
this.setState({ sMode: val });
},
value(val) {
const sValue = val || this.defaultValue || getNowByCurrentStateValue(this.sValue);
this.setState({
sValue,
});
},
selectedValue(val) {
this.setState({
sSelectedValue: val,
});
},
},
mounted(){
this.$nextTick(()=>{
this.saveFocusElement(DateInput.getInstance());
});
},
methods: {
onPanelChange(value, mode) {
const { sValue } = this;
if (!hasProp(this, 'mode')) {
this.setState({ sMode: mode });
}
this.__emit('panelChange', value || sValue, mode);
},
onKeyDown(event) {
if (event.target.nodeName.toLowerCase() === 'input') {
return undefined;
@ -149,6 +167,11 @@ const Calendar = {
source: 'dateInput',
});
},
onDateInputSelect (value) {
this.onSelect(value, {
source: 'dateInputSelect',
});
},
onDateTableSelect(value) {
const { timePicker, sSelectedValue } = this;
if (!sSelectedValue && timePicker) {
@ -167,13 +190,6 @@ const Calendar = {
source: 'todayButton',
});
},
onPanelChange(value, mode) {
const { sValue } = this;
if (!hasProp(this, 'mode')) {
this.setState({ sMode: mode });
}
this.__emit('panelChange', value || sValue, mode);
},
getRootDOMNode() {
return this.$el;
},
@ -197,10 +213,10 @@ const Calendar = {
timePicker,
disabledTime,
showDateInput,
renderSidebar,
sValue,
sSelectedValue,
sMode,
renderFooter,
$props: props,
} = this;
const clearIcon = getComponentFromProp(this, 'clearIcon');
@ -250,19 +266,23 @@ const Calendar = {
selectedValue={sSelectedValue}
onChange={this.onDateInputChange}
clearIcon={clearIcon}
onSelect={this.onDateInputSelect}
/>
) : null;
const children = [
renderSidebar(),
<div class={`${prefixCls}-panel`} key="panel">
const children =[];
if (props.renderSidebar) {
children.push(props.renderSidebar());
}
children.push(<div class={`${prefixCls}-panel`} key="panel">
{dateInputElement}
<div class={`${prefixCls}-date-panel`}>
<div tabIndex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}>
<CalendarHeader
locale={locale}
mode={sMode}
value={sValue}
onValueChange={this.setValue}
onPanelChange={this.onPanelChange}
renderFooter={renderFooter}
showTimePicker={showTimePicker}
prefixCls={prefixCls}
/>
@ -286,6 +306,7 @@ const Calendar = {
<CalendarFooter
showOk={props.showOk}
mode={sMode}
renderFooter={props.renderFooter}
locale={locale}
prefixCls={prefixCls}
@ -307,8 +328,7 @@ const Calendar = {
onCloseTimePicker={this.closeTimePicker}
/>
</div>
</div>,
];
</div>);
return this.renderRoot({
children,

23
components/vc-calendar/src/FullCalendar.jsx
View File

@ -1,9 +1,10 @@
import moment from 'moment';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp } from '../../_util/props-util';
import DateTable from './date/DateTable';
import MonthTable from './month/MonthTable';
import CalendarMixin from './mixin/CalendarMixin';
import CalendarMixin, {getNowByCurrentStateValue} from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin';
import CalendarHeader from './full-calendar/CalendarHeader';
import enUs from './locale/en_US';
@ -15,8 +16,6 @@ const FullCalendar = {
prefixCls: PropTypes.string.def('rc-calendar'),
defaultType: PropTypes.string.def('date'),
type: PropTypes.string,
// locale: PropTypes.object,
// onTypeChange: PropTypes.func,
fullscreen: PropTypes.bool.def(false),
monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func,
@ -27,6 +26,10 @@ const FullCalendar = {
headerRender: PropTypes.func,
showHeader: PropTypes.bool.def(true),
disabledDate: PropTypes.func,
value: PropTypes.object,
defaultValue: PropTypes.object,
selectedValue: PropTypes.object,
defaultSelectedValue: PropTypes.object,
renderFooter: PropTypes.func.def(() => null),
renderSidebar: PropTypes.func.def(() => null),
},
@ -38,8 +41,11 @@ const FullCalendar = {
} else {
type = this.defaultType;
}
const props = this.$props;
return {
sType: type,
sValue: props.value || props.defaultValue || moment(),
sSelectedValue: props.selectedValue || props.defaultSelectedValue,
};
},
watch: {
@ -48,6 +54,17 @@ const FullCalendar = {
sType: val,
});
},
value(val) {
const sValue = val || this.defaultValue || getNowByCurrentStateValue(this.sValue);
this.setState({
sValue,
});
},
selectedValue(val) {
this.setState({
sSelectedValue: val,
});
},
},
methods: {
onMonthSelect(value) {

12
components/vc-calendar/src/MonthCalendar.jsx
View File

@ -1,3 +1,4 @@
import moment from 'moment';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import KeyCode from '../../_util/KeyCode';
@ -14,6 +15,10 @@ const MonthCalendar = {
prefixCls: PropTypes.string.def('rc-calendar'),
monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func,
value: PropTypes.object,
defaultValue: PropTypes.object,
selectedValue: PropTypes.object,
defaultSelectedValue: PropTypes.object,
disabledDate: PropTypes.func,
monthCellContentRender: PropTypes.func,
renderFooter: PropTypes.func.def(() => null),
@ -22,7 +27,12 @@ const MonthCalendar = {
mixins: [BaseMixin, CommonMixin, CalendarMixin],
data() {
return { mode: 'month' };
const props = this.$props;
return {
mode: 'month',
sValue: props.value || props.defaultValue || moment(),
sSelectedValue: props.selectedValue || props.defaultSelectedValue,
};
},
methods: {
onKeyDown(event) {

3
components/vc-calendar/src/Picker.jsx
View File

@ -98,6 +98,7 @@ const Picker = {
const calendarProps = getOptionProps(props.calendar);
if (
cause.source === 'keyboard' ||
cause.source === 'dateInputSelect' ||
(!calendarProps.timePicker && cause.source !== 'dateInput') ||
cause.source === 'todayButton'
) {
@ -107,7 +108,7 @@ const Picker = {
},
onKeyDown(event) {
if (event.keyCode === KeyCode.DOWN && !this.sOpen) {
if (!this.sOpen && (event.keyCode === KeyCode.DOWN || event.keyCode === KeyCode.ENTER)) {
this.openCalendar();
event.preventDefault();
}

7
components/vc-calendar/src/RangeCalendar.jsx
View File

@ -79,6 +79,7 @@ const RangeCalendar = {
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
dateInputPlaceholder: PropTypes.any,
seperator: PropTypes.string.def('~'),
defaultValue: PropTypes.any,
value: PropTypes.any,
hoverValue: PropTypes.any,
@ -599,6 +600,8 @@ const RangeCalendar = {
showClear,
showToday,
type,
seperator,
mode,
} = props;
const clearIcon = getComponentFromProp(this, 'clearIcon');
const { sHoverValue, sSelectedValue, sMode, showTimePicker, sValue, $listeners } = this;
@ -748,7 +751,7 @@ const RangeCalendar = {
});
OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
}
const extraFooter = this.renderFooter();
const extraFooter = this.renderFooter(sMode);
return (
<div ref="rootInstance" class={className} tabIndex="0" onKeydown={this.onKeyDown}>
{props.renderSidebar()}
@ -764,7 +767,7 @@ const RangeCalendar = {
onMouseenter={type !== 'both' ? this.onDatePanelEnter : noop}
>
<CalendarPart {...leftPartProps} />
<span class={`${prefixCls}-range-middle`}>~</span>
<span class={`${prefixCls}-range-middle`}>{seperator}</span>
<CalendarPart {...rightPartProps} />
</div>
<div class={cls}>

5
components/vc-calendar/src/calendar/CalendarFooter.jsx
View File

@ -23,6 +23,7 @@ const CalendarFooter = {
disabledDate: PropTypes.func,
showTimePicker: PropTypes.bool,
okDisabled: PropTypes.bool,
mode: PropTypes.string,
},
methods: {
onSelect(value) {
@ -37,9 +38,9 @@ const CalendarFooter = {
render() {
const props = getOptionProps(this);
const { $listeners } = this;
const { value, prefixCls, showOk, timePicker, renderFooter, showToday } = props;
const { value, prefixCls, showOk, timePicker, renderFooter, showToday, mode } = props;
let footerEl = null;
const extraFooter = renderFooter();
const extraFooter = renderFooter && renderFooter(mode);
if (showToday || timePicker || extraFooter) {
const btnProps = {
props: {

5
components/vc-calendar/src/calendar/CalendarHeader.jsx
View File

@ -36,6 +36,7 @@ const CalendarHeader = {
mode: PropTypes.any,
monthCellRender: PropTypes.func,
monthCellContentRender: PropTypes.func,
renderFooter: PropTypes.func,
},
data() {
this.nextMonth = goMonth.bind(this, 1);
@ -140,6 +141,7 @@ const CalendarHeader = {
enableNext,
enablePrev,
disabledMonth,
renderFooter,
} = props;
let panel = null;
@ -154,6 +156,7 @@ const CalendarHeader = {
disabledDate={disabledMonth}
cellRender={props.monthCellRender}
contentRender={props.monthCellContentRender}
renderFooter={renderFooter}
/>
);
}
@ -165,6 +168,7 @@ const CalendarHeader = {
rootPrefixCls={prefixCls}
onSelect={this.onYearSelect}
onDecadePanelShow={this.showDecadePanel}
renderFooter={renderFooter}
/>
);
}
@ -175,6 +179,7 @@ const CalendarHeader = {
defaultValue={value}
rootPrefixCls={prefixCls}
onSelect={this.onDecadeSelect}
renderFooter={renderFooter}
/>
);
}

76
components/vc-calendar/src/date/DateInput.jsx
View File

@ -3,6 +3,11 @@ import BaseMixin from '../../../_util/BaseMixin';
import { getComponentFromProp } from '../../../_util/props-util';
import moment from 'moment';
import { formatDate } from '../util';
import KeyCode from '../../../_util/KeyCode';
let cachedSelectionStart;
let cachedSelectionEnd;
let dateInputInstance;
const DateInput = {
mixins: [BaseMixin],
@ -42,21 +47,27 @@ const DateInput = {
updated() {
this.$nextTick(() => {
if (
dateInputInstance &&
this.$data.hasFocus &&
!this.invalid &&
!(this.cachedSelectionStart === 0 && this.cachedSelectionEnd === 0)
!(cachedSelectionStart === 0 && cachedSelectionEnd === 0)
) {
this.$refs.dateInputInstance.setSelectionRange(
this.cachedSelectionStart,
this.cachedSelectionEnd,
dateInputInstance.setSelectionRange(
cachedSelectionStart,
cachedSelectionEnd,
);
}
});
},
getInstance() {
return dateInputInstance;
},
methods: {
updateState() {
this.cachedSelectionStart = this.$refs.dateInputInstance.selectionStart;
this.cachedSelectionEnd = this.$refs.dateInputInstance.selectionEnd;
if (dateInputInstance) {
cachedSelectionStart = dateInputInstance.selectionStart;
cachedSelectionEnd = dateInputInstance.selectionEnd;
}
// when popup show, click body will call this, bug!
const selectedValue = this.selectedValue;
if (!this.$data.hasFocus) {
@ -66,6 +77,12 @@ const DateInput = {
});
}
},
onClear() {
this.setState({
str: '',
});
this.__emit('clear', null);
},
onInputChange(event) {
const str = event.target.value;
const { disabledDate, format, selectedValue } = this.$props;
@ -79,7 +96,8 @@ const DateInput = {
});
return;
}
// 不合法直接退出
const parsed = moment(str, format, true);
if (!parsed.isValid()) {
this.setState({
@ -107,38 +125,38 @@ const DateInput = {
if (selectedValue !== value || (selectedValue && value && !selectedValue.isSame(value))) {
this.setState({
invalid: false,
str,
});
this.__emit('change', value);
}
},
onClear() {
this.setState({
str: '',
});
this.__emit('clear', null);
},
getRootDOMNode() {
return this.$el;
},
focus() {
if (this.$refs.dateInputInstance) {
this.$refs.dateInputInstance.focus();
}
},
onFocus() {
this.setState({ hasFocus: true });
},
onBlur() {
this.setState((prevState, prevProps) => ({
hasFocus: false,
str: formatDate(prevProps.value, prevProps.format),
}));
},
onKeyDown ({ keyCode }) {
const { value } = this.$props;
if (keyCode === KeyCode.ENTER ) {
this.__emit('select', value.clone());
}
},
getRootDOMNode() {
return this.$el;
},
focus() {
if (dateInputInstance) {
dateInputInstance.focus();
}
},
saveDateInput(dateInput) {
dateInputInstance = dateInput;
},
},
render() {
@ -149,12 +167,18 @@ const DateInput = {
<div class={`${prefixCls}-input-wrap`}>
<div class={`${prefixCls}-date-input-wrap`}>
<input
ref="dateInputInstance"
{...{directives: [
{
name: 'ant-ref',
value: this.saveDateInput,
},
]}}
class={`${prefixCls}-input ${invalidClass}`}
value={str}
disabled={disabled}
placeholder={placeholder}
onInput={this.onInputChange}
onKeydown={this.onKeyDown}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>

8
components/vc-calendar/src/decade/DecadePanel.jsx
View File

@ -26,6 +26,7 @@ export default {
value: PropTypes.object,
defaultValue: PropTypes.object,
rootPrefixCls: PropTypes.string,
renderFooter: PropTypes.func,
},
data() {
this.nextCentury = goYear.bind(this, 100);
@ -37,7 +38,7 @@ export default {
render() {
const value = this.sValue;
const locale = this.locale;
const { locale, renderFooter } = this.$props;
const currentYear = value.year();
const startYear = parseInt(currentYear / 100, 10) * 100;
const preYear = startYear - 10;
@ -59,6 +60,7 @@ export default {
}
}
const footer = renderFooter && renderFooter('decade');
const decadesEls = decades.map((row, decadeIndex) => {
const tds = row.map(decadeData => {
const dStartDecade = decadeData.startDecade;
@ -118,6 +120,10 @@ export default {
<tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
</table>
</div>
{footer && (
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div>
);
},

28
components/vc-calendar/src/locale/hi_IN.js Normal file
View File

@ -0,0 +1,28 @@
export default {
today: 'आज',
now: 'अभी',
backToToday: 'आज तक',
ok: 'ठीक',
clear: 'स्पष्ट',
month: 'महीना',
year: 'साल',
timeSelect: 'समय का चयन करें',
dateSelect: 'तारीख़ चुनें',
weekSelect: 'एक सप्ताह चुनें',
monthSelect: 'एक महीना चुनें',
yearSelect: 'एक वर्ष चुनें',
decadeSelect: 'एक दशक चुनें',
yearFormat: 'YYYY',
dateFormat: 'M/D/YYYY',
dayFormat: 'D',
dateTimeFormat: 'M/D/YYYY HH:mm:ss',
monthBeforeYear: true,
previousMonth: 'पिछला महीना (पेजअप)',
nextMonth: 'अगले महीने (पेजडाउन)',
previousYear: 'पिछले साल (Ctrl + बाएं)',
nextYear: 'अगले साल (Ctrl + दाहिना)',
previousDecade: 'पिछला दशक',
nextDecade: 'अगले दशक',
previousCentury: 'पीछ्ली शताब्दी',
nextCentury: 'अगली सदी',
};

28
components/vc-calendar/src/locale/kn_IN.js Normal file
View File

@ -0,0 +1,28 @@
export default {
today: 'ಇಂದು',
now: 'ಈಗ',
backToToday: 'ಇಂದು ಹಿಂದಿರುಗಿ',
ok: 'ಸರಿ',
clear: 'ಸ್ಪಷ್ಟ',
month: 'ತಿಂಗಳು',
year: 'ವರ್ಷ',
timeSelect: 'ಸಮಯ ಆಯ್ಕೆಮಾಡಿ',
dateSelect: 'ದಿನಾಂಕವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ',
weekSelect: 'ಒಂದು ವಾರದ ಆರಿಸಿ',
monthSelect: 'ಒಂದು ತಿಂಗಳು ಆಯ್ಕೆಮಾಡಿ',
yearSelect: 'ಒಂದು ವರ್ಷ ಆರಿಸಿ',
decadeSelect: 'ಒಂದು ದಶಕದ ಆಯ್ಕೆಮಾಡಿ',
yearFormat: 'YYYY',
dateFormat: 'M/D/YYYY',
dayFormat: 'D',
dateTimeFormat: 'M/D/YYYY HH:mm:ss',
monthBeforeYear: true,
previousMonth: 'ಹಿಂದಿನ ತಿಂಗಳು (ಪೇಜ್ಅಪ್)',
nextMonth: 'ಮುಂದಿನ ತಿಂಗಳು (ಪೇಜ್ಡೌನ್)',
previousYear: 'ಕಳೆದ ವರ್ಷ (Ctrl + ಎಡ)',
nextYear: 'ಮುಂದಿನ ವರ್ಷ (Ctrl + ಬಲ)',
previousDecade: 'ಕಳೆದ ದಶಕ',
nextDecade: 'ಮುಂದಿನ ದಶಕ',
previousCentury: 'ಕಳೆದ ಶತಮಾನ',
nextCentury: 'ಮುಂದಿನ ಶತಮಾನ',
};

10
components/vc-calendar/src/mixin/CalendarMixin.js
View File

@ -4,16 +4,13 @@ import { hasProp } from '../../../_util/props-util';
import moment from 'moment';
import { isAllowedDate, getTodayTime } from '../util/index';
function noop() {}
function getNow() {
return moment();
}
function getNowByCurrentStateValue(value) {
export function getNowByCurrentStateValue(value) {
let ret;
if (value) {
ret = getTodayTime(value);
} else {
ret = getNow();
ret = moment();
}
return ret;
}
@ -29,6 +26,7 @@ function isMoment(value) {
const MomentType = PropTypes.custom(isMoment);
const CalendarMixin = {
mixins: [BaseMixin],
name: 'CalendarMixinWrapper',
props: {
value: MomentType,
defaultValue: MomentType,
@ -36,7 +34,7 @@ const CalendarMixin = {
data() {
const props = this.$props;
const sValue = props.value || props.defaultValue || getNow();
const sValue = props.value || props.defaultValue || getNowByCurrentStateValue();
return {
sValue,
sSelectedValue: props.selectedValue || props.defaultSelectedValue,

8
components/vc-calendar/src/mixin/CommonMixin.js
View File

@ -30,11 +30,15 @@ export default {
}
return format;
},
focus() {
if (this.$refs.rootInstance) {
if (this.focusElement) {
this.focusElement.focus();
} else if (this.$refs.rootInstance) {
this.$refs.rootInstance.focus();
}
},
saveFocusElement (focusElement) {
this.focusElement = focusElement;
},
},
};

8
components/vc-calendar/src/month/MonthPanel.jsx
View File

@ -23,6 +23,7 @@ const MonthPanel = {
// onChange: PropTypes.func,
disabledDate: PropTypes.func,
// onSelect: PropTypes.func,
renderFooter: PropTypes.func,
},
data() {
@ -69,10 +70,13 @@ const MonthPanel = {
locale,
rootPrefixCls,
disabledDate,
renderFooter,
$listeners = {},
} = this;
const year = sValue.year();
const prefixCls = `${rootPrefixCls}-month-panel`;
const footer = renderFooter && renderFooter('month');
return (
<div class={prefixCls}>
<div>
@ -112,6 +116,10 @@ const MonthPanel = {
prefixCls={prefixCls}
/>
</div>
{footer && (
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div>
</div>
);

9
components/vc-calendar/src/year/YearPanel.jsx
View File

@ -25,6 +25,7 @@ export default {
value: PropTypes.object,
defaultValue: PropTypes.object,
locale: PropTypes.object,
renderFooter: PropTypes.func,
},
data() {
this.nextDecade = goYear.bind(this, 10);
@ -59,7 +60,7 @@ export default {
},
render() {
const { sValue: value, locale, $listeners = {} } = this;
const { sValue: value, locale, renderFooter, $listeners = {} } = this;
const decadePanelShow = $listeners.decadePanelShow || noop;
const years = this.years();
const currentYear = value.year();
@ -101,7 +102,7 @@ export default {
</tr>
);
});
const footer = renderFooter && renderFooter('year');
return (
<div class={prefixCls}>
<div>
@ -136,6 +137,10 @@ export default {
<tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
</table>
</div>
{footer && (
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div>
</div>
);