import{_ as o,a as t,q as n,k as a}from"./index.3fe853a6.js";const r={pageData:{title:"FAQ",description:"",frontmatter:{},headers:[{level:3,title:"Are you going to provide Sass/Stylus(etc...) style file?",slug:"Are-you-going-to-provide-Sass-Stylus-etc-style-file",content:"No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google)."},{level:3,title:"How to use DatePicker with dayjs",slug:"How-to-use-DatePicker-with-dayjs",content:"We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing dayjs with Day.js directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)."},{level:3,title:"Internationalization does not take effect?",slug:"Internationalization-does-not-take-effect",content:"The language pack provided by the component does not affect date formatting. You need to import the dayjs language pack and apply it. Refer to the `ConfigProvider` component."},{level:3,title:"Select Dropdown DatePicker TimePicker Popover Popconfirm disappear when I click another popup component inside it, How to resolve it?",slug:"Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-disappear-when-I-click-another-popup-component-inside-it-How-to-resolve-it",content:'Use `<a-select :getPopupContainer="trigger => trigger.parentNode">` to render component inside Popover. (Or other getXxxxContainer props)'},{level:3,title:"Select Dropdown DatePicker TimePicker Popover Popconfirm scroll with the page?",slug:"Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scroll-with-the-page",content:'Use `<a-select :getPopupContainer="trigger => trigger.parentNode">` to render component inside the scroll area. (Or other getXxxxContainer props).'},{level:3,title:"How to modify the default theme of Ant Design Vue?",slug:"How-to-modify-the-default-theme-of-Ant-Design-Vue",content:"See [Customize Theme](/docs/vue/customize-theme/)."},{level:3,title:"It doesn't work when I change defaultValue,defaultOpenKeys, initialValue dynamically.",slug:"It-doesn-t-work-when-I-change-defaultValue-defaultOpenKeys-initialValue-dynamically",content:"The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. This feature is referenced from [React](https://facebook.github.io/react/docs/forms.html#controlled-components)."},{level:3,title:"I set the value of Input/Select(etc...), and then, it cannot be changed by user's action.",slug:"I-set-the-value-of-Input-Select-etc-and-then-it-cannot-be-changed-by-user-s-action",content:"Try `defaultValue` or `change` or `v-model` to change `value`."},{level:3,title:"ant-design-vue override my global styles!",slug:"ant-design-vue-override-my-global-styles",content:"Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 ."},{level:3,title:"ant-design-vue makes only poor user experience on mobile.",slug:"ant-design-vue-makes-only-poor-user-experience-on-mobile",content:"`ant-design-vue` is not designed for mobile."},{level:3,title:"When I set mode to DatePicker/RangePicker, I cannot select year or month anymore?",slug:"When-I-set-mode-to-DatePicker-RangePicker-I-cannot-select-year-or-month-anymore",content:"In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now."}],relativePath:"site/src/vueDocs/faq.en-US.md",content:"# FAQ\n\nHere are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.\n\n### Are you going to provide Sass/Stylus(etc...) style file?\n\nNo, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).\n\n### How to use DatePicker with dayjs\n\nWe also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing dayjs with Day.js directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).\n\n### Internationalization does not take effect?\n\nThe language pack provided by the component does not affect date formatting. You need to import the dayjs language pack and apply it. Refer to the `ConfigProvider` component.\n\n### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappear when I click another popup component inside it, How to resolve it?\n\nUse `&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;` to render component inside Popover. (Or other getXxxxContainer props)\n\n### `Select Dropdown DatePicker TimePicker Popover Popconfirm` scroll with the page?\n\nUse `&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;` to render component inside the scroll area. (Or other getXxxxContainer props).\n\n### How to modify the default theme of Ant Design Vue?\n\nSee [Customize Theme](/docs/vue/customize-theme/).\n\n### It doesn&#39;t work when I change `defaultValue`,`defaultOpenKeys`, `initialValue` dynamically.\n\nThe `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. This feature is referenced from [React](https://facebook.github.io/react/docs/forms.html#controlled-components).\n\n### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user&#39;s action.\n\nTry `defaultValue` or `change` or `v-model` to change `value`.\n\n### ant-design-vue override my global styles!\n\nYes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can&#39;t be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .\n\nOr, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)\n\n### `ant-design-vue` makes only poor user experience on mobile.\n\n`ant-design-vue` is not designed for mobile.\n\n### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore?\n\nIn a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won&#39;t close now.\n\nThat is because `&lt;DatePicker mode=&quot;year&quot; /&gt;` do not equal to `YearPicker`, `&lt;RangePicker mode=&quot;month&quot; /&gt;` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190), which simply control the displayed panel and won&#39;t change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).\n\n##### Solution\n\nThe following articles are the implementation articles of the react version, the ideas are the same. In [one article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [another article](https://www.cnblogs.com/zyl-Tara/p/10197177.html) approach, using methods `mode` and `panelChange` to encapsulate a component such as `YearPicker`. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.\n",html:`<h1 id="FAQ">FAQ <a class="header-anchor" href="#FAQ">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h1>
<p>Here are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.</p>
<h3 id="Are-you-going-to-provide-Sass-Stylus-etc-style-file">Are you going to provide Sass/Stylus(etc...) style file? <a class="header-anchor" href="#Are-you-going-to-provide-Sass-Stylus-etc-style-file">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).</p>
<h3 id="How-to-use-DatePicker-with-dayjs">How to use DatePicker with dayjs <a class="header-anchor" href="#How-to-use-DatePicker-with-dayjs">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing dayjs with Day.js directly without changing a line of existing code. More info can be found at <a href="https://github.com/ant-design/antd-dayjs-webpack-plugin" target="_blank" rel="noopener noreferrer">antd-dayjs-webpack-plugin</a>.</p>
<h3 id="Internationalization-does-not-take-effect">Internationalization does not take effect? <a class="header-anchor" href="#Internationalization-does-not-take-effect">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>The language pack provided by the component does not affect date formatting. You need to import the dayjs language pack and apply it. Refer to the <code>ConfigProvider</code> component.</p>
<h3 id="Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-disappear-when-I-click-another-popup-component-inside-it-How-to-resolve-it"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> disappear when I click another popup component inside it, How to resolve it? <a class="header-anchor" href="#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-disappear-when-I-click-another-popup-component-inside-it-How-to-resolve-it">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside Popover. (Or other getXxxxContainer props)</p>
<h3 id="Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scroll-with-the-page"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> scroll with the page? <a class="header-anchor" href="#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scroll-with-the-page">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside the scroll area. (Or other getXxxxContainer props).</p>
<h3 id="How-to-modify-the-default-theme-of-Ant-Design-Vue">How to modify the default theme of Ant Design Vue? <a class="header-anchor" href="#How-to-modify-the-default-theme-of-Ant-Design-Vue">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>See <a href="/docs/vue/customize-theme/">Customize Theme</a>.</p>
<h3 id="It-doesn-t-work-when-I-change-defaultValue-defaultOpenKeys-initialValue-dynamically">It doesn't work when I change <code>defaultValue</code>,<code>defaultOpenKeys</code>, <code>initialValue</code> dynamically. <a class="header-anchor" href="#It-doesn-t-work-when-I-change-defaultValue-defaultOpenKeys-initialValue-dynamically">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>The <code>defaultXxxx</code> (like <code>defaultValue</code>) of <code>Input</code>/<code>Select</code>(etc...) only works in first render. This feature is referenced from <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" target="_blank" rel="noopener noreferrer">React</a>.</p>
<h3 id="I-set-the-value-of-Input-Select-etc-and-then-it-cannot-be-changed-by-user-s-action">I set the <code>value</code> of <code>Input</code>/<code>Select</code>(etc...), and then, it cannot be changed by user's action. <a class="header-anchor" href="#I-set-the-value-of-Input-Select-etc-and-then-it-cannot-be-changed-by-user-s-action">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Try <code>defaultValue</code> or <code>change</code> or <code>v-model</code> to change <code>value</code>.</p>
<h3 id="ant-design-vue-override-my-global-styles">ant-design-vue override my global styles! <a class="header-anchor" href="#ant-design-vue-override-my-global-styles">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace <a href="https://github.com/ant-design/ant-design/issues/4331" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/4331</a> .</p>
<p>Or, follow the instructions in <a href="./docs/react/customize-theme#How-to-avoid-modifying-global-styles-?">How to avoid modifying global styles?</a></p>
<h3 id="ant-design-vue-makes-only-poor-user-experience-on-mobile"><code>ant-design-vue</code> makes only poor user experience on mobile. <a class="header-anchor" href="#ant-design-vue-makes-only-poor-user-experience-on-mobile">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p><code>ant-design-vue</code> is not designed for mobile.</p>
<h3 id="When-I-set-mode-to-DatePicker-RangePicker-I-cannot-select-year-or-month-anymore">When I set <code>mode</code> to DatePicker/RangePicker, I cannot select year or month anymore? <a class="header-anchor" href="#When-I-set-mode-to-DatePicker-RangePicker-I-cannot-select-year-or-month-anymore">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add <code>mode</code> to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.</p>
<p>That is because <code>&lt;DatePicker mode=&quot;year&quot; /&gt;</code> do not equal to <code>YearPicker</code>, <code>&lt;RangePicker mode=&quot;month&quot; /&gt;</code> do not equal to <code>MonthRangePicker</code> either. The <code>mode</code> property was added to support <a href="https://github.com/ant-design/ant-design/issues/5190" target="_blank" rel="noopener noreferrer">showing time picker panel in DatePicker</a>, which simply control the displayed panel and won't change the original date picking behavior of <code>DatePicker/RangePicker</code> (for instance you still need to click date cell to finish selection in a DatePicker, whatever the <code>mode</code> is).</p>
<h5 id="Solution">Solution <a class="header-anchor" href="#Solution">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h5>
<p>The following articles are the implementation articles of the react version, the ideas are the same. In <a href="https://juejin.im/post/5cf65c366fb9a07eca6968f9" target="_blank" rel="noopener noreferrer">one article</a> or <a href="https://www.cnblogs.com/zyl-Tara/p/10197177.html" target="_blank" rel="noopener noreferrer">another article</a> approach, using methods <code>mode</code> and <code>panelChange</code> to encapsulate a component such as <code>YearPicker</code>. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.</p>
`,lastUpdated:1748060269534}},i={class:"markdown"};function c(s,e,d,l,h,p){return a(),t("article",i,e[0]||(e[0]=[n('<h1 id="FAQ">FAQ <a class="header-anchor" href="#FAQ"><span aria-hidden="true" class="anchor">#</span></a></h1><p>Here are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.</p><h3 id="Are-you-going-to-provide-Sass-Stylus-etc-style-file">Are you going to provide Sass/Stylus(etc...) style file? <a class="header-anchor" href="#Are-you-going-to-provide-Sass-Stylus-etc-style-file"><span aria-hidden="true" class="anchor">#</span></a></h3><p>No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).</p><h3 id="How-to-use-DatePicker-with-dayjs">How to use DatePicker with dayjs <a class="header-anchor" href="#How-to-use-DatePicker-with-dayjs"><span aria-hidden="true" class="anchor">#</span></a></h3><p>We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing dayjs with Day.js directly without changing a line of existing code. More info can be found at <a href="https://github.com/ant-design/antd-dayjs-webpack-plugin" target="_blank" rel="noopener noreferrer">antd-dayjs-webpack-plugin</a>.</p><h3 id="Internationalization-does-not-take-effect">Internationalization does not take effect? <a class="header-anchor" href="#Internationalization-does-not-take-effect"><span aria-hidden="true" class="anchor">#</span></a></h3><p>The language pack provided by the component does not affect date formatting. You need to import the dayjs language pack and apply it. Refer to the <code>ConfigProvider</code> component.</p><h3 id="Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-disappear-when-I-click-another-popup-component-inside-it-How-to-resolve-it"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> disappear when I click another popup component inside it, How to resolve it? <a class="header-anchor" href="#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-disappear-when-I-click-another-popup-component-inside-it-How-to-resolve-it"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside Popover. (Or other getXxxxContainer props)</p><h3 id="Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scroll-with-the-page"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> scroll with the page? <a class="header-anchor" href="#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scroll-with-the-page"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside the scroll area. (Or other getXxxxContainer props).</p><h3 id="How-to-modify-the-default-theme-of-Ant-Design-Vue">How to modify the default theme of Ant Design Vue? <a class="header-anchor" href="#How-to-modify-the-default-theme-of-Ant-Design-Vue"><span aria-hidden="true" class="anchor">#</span></a></h3><p>See <a href="/docs/vue/customize-theme/">Customize Theme</a>.</p><h3 id="It-doesn-t-work-when-I-change-defaultValue-defaultOpenKeys-initialValue-dynamically">It doesn&#39;t work when I change <code>defaultValue</code>,<code>defaultOpenKeys</code>, <code>initialValue</code> dynamically. <a class="header-anchor" href="#It-doesn-t-work-when-I-change-defaultValue-defaultOpenKeys-initialValue-dynamically"><span aria-hidden="true" class="anchor">#</span></a></h3><p>The <code>defaultXxxx</code> (like <code>defaultValue</code>) of <code>Input</code>/<code>Select</code>(etc...) only works in first render. This feature is referenced from <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" target="_blank" rel="noopener noreferrer">React</a>.</p><h3 id="I-set-the-value-of-Input-Select-etc-and-then-it-cannot-be-changed-by-user-s-action">I set the <code>value</code> of <code>Input</code>/<code>Select</code>(etc...), and then, it cannot be changed by user&#39;s action. <a class="header-anchor" href="#I-set-the-value-of-Input-Select-etc-and-then-it-cannot-be-changed-by-user-s-action"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Try <code>defaultValue</code> or <code>change</code> or <code>v-model</code> to change <code>value</code>.</p><h3 id="ant-design-vue-override-my-global-styles">ant-design-vue override my global styles! <a class="header-anchor" href="#ant-design-vue-override-my-global-styles"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can&#39;t be removed now. More info trace <a href="https://github.com/ant-design/ant-design/issues/4331" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/4331</a> .</p><p>Or, follow the instructions in <a href="./docs/react/customize-theme#How-to-avoid-modifying-global-styles-?">How to avoid modifying global styles?</a></p><h3 id="ant-design-vue-makes-only-poor-user-experience-on-mobile"><code>ant-design-vue</code> makes only poor user experience on mobile. <a class="header-anchor" href="#ant-design-vue-makes-only-poor-user-experience-on-mobile"><span aria-hidden="true" class="anchor">#</span></a></h3><p><code>ant-design-vue</code> is not designed for mobile.</p><h3 id="When-I-set-mode-to-DatePicker-RangePicker-I-cannot-select-year-or-month-anymore">When I set <code>mode</code> to DatePicker/RangePicker, I cannot select year or month anymore? <a class="header-anchor" href="#When-I-set-mode-to-DatePicker-RangePicker-I-cannot-select-year-or-month-anymore"><span aria-hidden="true" class="anchor">#</span></a></h3><p>In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add <code>mode</code> to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won&#39;t close now.</p><p>That is because <code>&lt;DatePicker mode=&quot;year&quot; /&gt;</code> do not equal to <code>YearPicker</code>, <code>&lt;RangePicker mode=&quot;month&quot; /&gt;</code> do not equal to <code>MonthRangePicker</code> either. The <code>mode</code> property was added to support <a href="https://github.com/ant-design/ant-design/issues/5190" target="_blank" rel="noopener noreferrer">showing time picker panel in DatePicker</a>, which simply control the displayed panel and won&#39;t change the original date picking behavior of <code>DatePicker/RangePicker</code> (for instance you still need to click date cell to finish selection in a DatePicker, whatever the <code>mode</code> is).</p><h5 id="Solution">Solution <a class="header-anchor" href="#Solution"><span aria-hidden="true" class="anchor">#</span></a></h5><p>The following articles are the implementation articles of the react version, the ideas are the same. In <a href="https://juejin.im/post/5cf65c366fb9a07eca6968f9" target="_blank" rel="noopener noreferrer">one article</a> or <a href="https://www.cnblogs.com/zyl-Tara/p/10197177.html" target="_blank" rel="noopener noreferrer">another article</a> approach, using methods <code>mode</code> and <code>panelChange</code> to encapsulate a component such as <code>YearPicker</code>. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.</p>',28)]))}const g=o(r,[["render",c]]);export{g as default};