mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
729 lines
54 KiB
JavaScript
729 lines
54 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[135],{
|
|
|
|
/***/ 441:
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
// ESM COMPAT FLAG
|
|
__webpack_require__.r(__webpack_exports__);
|
|
|
|
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
|
|
var vue_esm_browser = __webpack_require__(0);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/jp/datetime-picker.md?vue&type=template&id=9dfc5b9c
|
|
|
|
var datetime_pickervue_type_template_id_9dfc5b9c_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var datetime_pickervue_type_template_id_9dfc5b9c_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h2 id=\"datetimepicker\"><a class=\"header-anchor\" href=\"#datetimepicker\">¶</a> DateTimePicker</h2><p>1つのピッカーで日時を選択します。</p><div class=\"tip\"><p>DateTimePickerはDatePickerとTimePickerから派生したものです。<code>pickerOptions</code>やその他の属性についての詳しい説明は、DatePickerとTimePickerを参照してください。</p></div><h3 id=\"ri-futo-shi-jian\"><a class=\"header-anchor\" href=\"#ri-futo-shi-jian\">¶</a> 日付と時間</h3>", 4);
|
|
|
|
var datetime_pickervue_type_template_id_9dfc5b9c_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("を"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetime"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("に設定することで、1つのピッカーで日付と時刻を同時に選択することができます。ショートカットの使い方は日付ピッカーと同じです。")])], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Default</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetime\"\n placeholder=\"Select date and time\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">With shortcuts</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetime\"\n placeholder=\"Select date and time\"\n :picker-options=\"pickerOptions\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">With default time</span>\n <el-date-picker\n v-model=\"value3\"\n type=\"datetime\"\n placeholder=\"Select date and time\"\n default-time=\"12:00:00\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n value3: ''\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "ri-futo-shi-jianno-fan-wei"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#ri-futo-shi-jianno-fan-wei"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 日付と時間の範囲")], -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("を"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetimerange"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("に設定することで、日付と時間の範囲を選択することができる。")])], -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Default</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetimerange\"\n range-separator=\"To\"\n start-placeholder=\"Start date\"\n end-placeholder=\"End date\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">With shortcuts</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetimerange\"\n :picker-options=\"pickerOptions\"\n range-separator=\"To\"\n start-placeholder=\"Start date\"\n end-placeholder=\"End date\"\n align=\"right\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value2: ''\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "kai-shi-rito-zhong-liao-rinodehuorutono-shi-jian-zhi"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#kai-shi-rito-zhong-liao-rinodehuorutono-shi-jian-zhi"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 開始日と終了日のデフォルトの時間値")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("日付パネルで "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetimerange"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 型の日付範囲を選択した場合、開始日と終了日のデフォルト値として "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "00:00:00"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" が用いられる。これは "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "default-time"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" 属性で制御することができる。"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "default-time"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("は最大2つの文字列の配列を受け付ける。1つ目の項目は開始日の時刻を制御し、2つ目の項目は終了日の時刻を制御する。")])], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Start date time 12:00:00</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetimerange\"\n start-placeholder=\"Start Date\"\n end-placeholder=\"End Date\"\n :default-time=\"defaultTime1\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">Start date time 12:00:00, end date time 08:00:00</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetimerange\"\n align=\"right\"\n start-placeholder=\"Start Date\"\n end-placeholder=\"End Date\"\n :default-time=\"defaultTime2\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: '',\n value2: '',\n defaultTime1: [\n new Date(2000, 1, 1, 12, 0, 0),\n ], // '12:00:00'\n defaultTime2: [\n new Date(2000, 1, 1, 12, 0, 0),\n new Date(2000, 2, 1, 8, 0, 0)\n ] // '12:00:00', '08:00:00'\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"shu-xing\"><a class=\"header-anchor\" href=\"#shu-xing\">¶</a> 属性</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>value / v-model</td><td>バインディング値</td><td>date(DateTimePicker) / array(DateTimeRangePicker)</td><td>—</td><td>—</td></tr><tr><td>readonly</td><td>DatePicker が読み取り専用かどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>disabled</td><td>DatePicker が無効かどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>editable</td><td>DatePicker が編集可能かどうか</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>clearable</td><td>クリアボタンを表示するかどうか</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>size</td><td>インプットサイズ</td><td>string</td><td>large/small/mini</td><td>—</td></tr><tr><td>placeholder</td><td>非範囲モード時のプレースホルダ</td><td>string</td><td>—</td><td>—</td></tr><tr><td>start-placeholder</td><td>範囲モードでの開始日のプレースホルダ</td><td>string</td><td>—</td><td>—</td></tr><tr><td>end-placeholder</td><td>範囲終了日のプレースホルダ</td><td>string</td><td>—</td><td>—</td></tr><tr><td>time-arrow-control</td><td>矢印ボタンで時間を選ぶかどうか</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>type</td><td>ピッカーのタイプ</td><td>string</td><td>year/month/date/datetime/ week/datetimerange/daterange</td><td>date</td></tr><tr><td>format</td><td>インプットボックスの表示値のフォーマット</td><td>string</td><td>see <a href=\"#/en-US/component/date-picker#date-formats\">date formats</a></td><td>yyyy-MM-dd HH:mm:ss</td></tr><tr><td>align</td><td>アライメント</td><td>left/center/right</td><td>left</td><td></td></tr><tr><td>popper-class</td><td>DateTimePickerのドロップダウンのカスタムクラス名</td><td>string</td><td>—</td><td>—</td></tr><tr><td>range-separator</td><td>レンジセパレータ</td><td>string</td><td>-</td><td>'-'</td></tr><tr><td>default-value</td><td>オプション、カレンダーのデフォルトの日付</td><td>Date</td><td>anything accepted by <code>new Date()</code></td><td>—</td></tr><tr><td>default-time</td><td>日付を選択した後のデフォルトの時刻の値</td><td>non-range: string / range: string[]</td><td>non-range: a string like <code>12:00:00</code>, range: array of two strings, and the first item is for the start date and second for the end date. <code>00:00:00</code> will be used if not specified</td><td>—</td></tr><tr><td>name</td><td>ネイティブインプットの <code>name</code> と同じ</td><td>string</td><td>—</td><td>—</td></tr><tr><td>unlink-panels</td><td>レンジピッカーで2つのデータパネルのリンクを解除する</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>prefix-icon</td><td>カスタムプレフィックスアイコンクラス</td><td>string</td><td>—</td><td>el-icon-date</td></tr><tr><td>clear-icon</td><td>カスタムクリアアイコンクラス</td><td>string</td><td>—</td><td>el-icon-circle-close</td></tr></tbody></table><h3 id=\"pitukaopusiyon\"><a class=\"header-anchor\" href=\"#pitukaopusiyon\">¶</a> ピッカーオプション</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>shortcuts</td><td>a { text, onClick } object array to set shortcut options, check the table below</td><td>object[]</td><td>—</td><td>—</td></tr><tr><td>disabledDate</td><td>a function determining if a date is disabled with that date as its parameter. Should return a Boolean</td><td>function</td><td>—</td><td>—</td></tr><tr><td>cellClassName</td><td>set custom className</td><td>Function(Date)</td><td>—</td><td>—</td></tr><tr><td>firstDayOfWeek</td><td>first day of week</td><td>Number</td><td>1 to 7</td><td>7</td></tr></tbody></table><h3 id=\"siyotokatuto\"><a class=\"header-anchor\" href=\"#siyotokatuto\">¶</a> ショートカット</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>text</td><td>title of the shortcut</td><td>string</td><td>—</td><td>—</td></tr><tr><td>onClick</td><td>callback function, triggers when the shortcut is clicked, with the <code>vm</code> as its parameter. You can change the picker value by emitting the <code>pick</code> event. Example: <code>vm.$emit('pick', new Date())</code></td><td>function</td><td>—</td><td>—</td></tr></tbody></table><h3 id=\"ibento\"><a class=\"header-anchor\" href=\"#ibento\">¶</a> イベント</h3><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>triggers when user confirms the value</td><td>component's binding value</td></tr><tr><td>blur</td><td>triggers when Input blurs</td><td>component instance</td></tr><tr><td>focus</td><td>triggers when Input focuses</td><td>component instance</td></tr></tbody></table><h3 id=\"mesotudo\"><a class=\"header-anchor\" href=\"#mesotudo\">¶</a> メソッド</h3><table><thead><tr><th>Method</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>focus</td><td>focus the Input component</td><td>—</td></tr></tbody></table>", 10);
|
|
|
|
function datetime_pickervue_type_template_id_9dfc5b9c_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
|
|
|
|
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
|
|
|
|
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
|
|
|
|
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", datetime_pickervue_type_template_id_9dfc5b9c_hoisted_1, [datetime_pickervue_type_template_id_9dfc5b9c_hoisted_2, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [datetime_pickervue_type_template_id_9dfc5b9c_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_8, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_11, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_14]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/jp/datetime-picker.md?vue&type=template&id=9dfc5b9c
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/jp/datetime-picker.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var datetime_pickervue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Default", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "With shortcuts", -1);
|
|
|
|
var _hoisted_5 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "With default time", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Select date and time"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Select date and time",
|
|
"picker-options": _ctx.pickerOptions
|
|
}, null, 8, ["modelValue", "picker-options"])]), _createVNode("div", _hoisted_5, [_hoisted_6, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.value3 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Select date and time",
|
|
"default-time": "12:00:00"
|
|
}, null, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: 'Today',
|
|
onClick: function onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
}
|
|
}, {
|
|
text: 'Yesterday',
|
|
onClick: function onClick(picker) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}, {
|
|
text: 'A week ago',
|
|
onClick: function onClick(picker) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}]
|
|
},
|
|
value1: '',
|
|
value2: '',
|
|
value3: ''
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Default", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "With shortcuts", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"range-separator": "To",
|
|
"start-placeholder": "Start date",
|
|
"end-placeholder": "End date"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"picker-options": _ctx.pickerOptions,
|
|
"range-separator": "To",
|
|
"start-placeholder": "Start date",
|
|
"end-placeholder": "End date",
|
|
align: "right"
|
|
}, null, 8, ["modelValue", "picker-options"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: 'Last week',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: 'Last month',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: 'Last 3 months',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
|
value2: ''
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Start date time 12:00:00", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Start date time 12:00:00, end date time 08:00:00", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"start-placeholder": "Start Date",
|
|
"end-placeholder": "End Date",
|
|
"default-time": _ctx.defaultTime1
|
|
}, null, 8, ["modelValue", "default-time"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
align: "right",
|
|
"start-placeholder": "Start Date",
|
|
"end-placeholder": "End Date",
|
|
"default-time": _ctx.defaultTime2
|
|
}, null, 8, ["modelValue", "default-time"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
value1: '',
|
|
value2: '',
|
|
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)],
|
|
// '12:00:00'
|
|
defaultTime2: [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)] // '12:00:00', '08:00:00'
|
|
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/jp/datetime-picker.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/jp/datetime-picker.md
|
|
|
|
|
|
|
|
datetime_pickervue_type_script_lang_ts.render = datetime_pickervue_type_template_id_9dfc5b9c_render
|
|
|
|
/* harmony default export */ var datetime_picker = __webpack_exports__["default"] = (datetime_pickervue_type_script_lang_ts);
|
|
|
|
/***/ }),
|
|
|
|
/***/ 674:
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
// ESM COMPAT FLAG
|
|
__webpack_require__.r(__webpack_exports__);
|
|
|
|
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
|
|
var vue_esm_browser = __webpack_require__(0);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/fr-FR/datetime-picker.md?vue&type=template&id=11b635f8
|
|
|
|
var datetime_pickervue_type_template_id_11b635f8_hoisted_1 = {
|
|
class: "content element-doc"
|
|
};
|
|
|
|
var datetime_pickervue_type_template_id_11b635f8_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h2 id=\"datetimepicker\"><a class=\"header-anchor\" href=\"#datetimepicker\">¶</a> DateTimePicker</h2><p>Sélectionnez une date et une heure dans un seul picker.</p><div class=\"tip\"><p>DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur <code>pickerOptions</code> et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.</p></div><h3 id=\"date-et-horaire\"><a class=\"header-anchor\" href=\"#date-et-horaire\">¶</a> Date et horaire</h3>", 4);
|
|
|
|
var datetime_pickervue_type_template_id_11b635f8_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez sélectionner une date et un horaire en un seul picker en réglant "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" sur "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetime"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". La manière d'utiliser des raccourcis est la même que pour DatePicker.")])], -1);
|
|
|
|
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Défaut</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetime\"\n placeholder=\"Selectionnez date et horaire\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">Avec raccourcis</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetime\"\n placeholder=\"Selectionnez date et horaire\"\n :picker-options=\"pickerOptions\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">Avec horaire par défaut</span>\n <el-date-picker\n v-model=\"value3\"\n type=\"datetime\"\n placeholder=\"Selectionnez date et horaire\"\n default-time=\"12:00:00\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: 'Aujourdh\\'ui',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Hier',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.emit('pick', date);\n }\n }, {\n text: 'Il y a une semaine',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n value3: ''\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "plage-de-dates-et-d-horaires"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#plage-de-dates-et-d-horaires"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Plage de dates et d'horaires")], -1);
|
|
|
|
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Vous pouvez sélectionner des plages en configurant "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" sur "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetimerange"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")])], -1);
|
|
|
|
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Défaut</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetimerange\"\n range-separator=\"à\"\n start-placeholder=\"Date de début\"\n end-placeholder=\"Date de fin\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">Avec raccourcis</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetimerange\"\n :picker-options=\"pickerOptions\"\n range-separator=\"à\"\n start-placeholder=\"Date de début\"\n end-placeholder=\"Date de fin\"\n align=\"right\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: 'La semaine passée',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Le mois dernier',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Les 2 derniers mois',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value2: ''\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
|
|
id: "horaire-par-defaut-pour-les-plages-de-dates"
|
|
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
|
|
class: "header-anchor",
|
|
href: "#horaire-par-defaut-pour-les-plages-de-dates"
|
|
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Horaire par défaut pour les plages de dates")], -1);
|
|
|
|
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "datetimerange"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "00:00:00"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "default-time"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.")])], -1);
|
|
|
|
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
|
|
class: "html"
|
|
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Heure de la date de début 12:00:00</span>\n <el-date-picker\n v-model=\"value1\"\n type=\"datetimerange\"\n start-placeholder=\"Date de début\"\n end-placeholder=\"Date de fin\"\n :default-time=\"defaultTime1\">\n </el-date-picker>\n </div>\n <div class=\"block\">\n <span class=\"demonstration\">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n <el-date-picker\n v-model=\"value2\"\n type=\"datetimerange\"\n align=\"right\"\n start-placeholder=\"Date de début\"\n end-placeholder=\"Date de fin\"\n :default-time=\"defaultTime2\">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: '',\n value2: '',\n defaultTime1: [\n new Date(2000, 1, 1, 12, 0, 0),\n ], // '12:00:00'\n defaultTime2: [\n new Date(2000, 1, 1, 12, 0, 0),\n new Date(2000, 2, 1, 8, 0, 0)\n ] // '12:00:00', '08:00:00'\n };\n }\n };\n</script>\n")], -1);
|
|
|
|
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"attributs\"><a class=\"header-anchor\" href=\"#attributs\">¶</a> Attributs</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>value / v-model</td><td>La valeur liée.</td><td>date(DateTimePicker) / array(DateTimeRangePicker)</td><td>—</td><td>—</td></tr><tr><td>readonly</td><td>Si le DatePicker est en lecture seule.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>disabled</td><td>Si le DatePicker est désactivé.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>editable</td><td>Si le champ est éditable.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>clearable</td><td>Si la croix de reset doit apparaître.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>size</td><td>Taille du champ.</td><td>string</td><td>large/medium/small/mini</td><td>large</td></tr><tr><td>placeholder</td><td>Le placeholder en mode normal.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>start-placeholder</td><td>Le placeholder de la date de début en mode plage de dates.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>end-placeholder</td><td>Le placeholder de la date de fin en mode plage de dates.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>time-arrow-control</td><td>Si l'horaire peut être sélectionné en utilisant les flèches de direction.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>type</td><td>Type du picker.</td><td>string</td><td>year/month/date/datetime/ week/datetimerange/daterange</td><td>date</td></tr><tr><td>format</td><td>Format d'affichage de la date dans le champ.</td><td>string</td><td>Voir <a href=\"#/fr-FR/component/date-picker#formats-de-date\">formats de date</a></td><td>yyyy-MM-dd HH:mm:ss</td></tr><tr><td>align</td><td>Alignements.</td><td>left/center/right</td><td>left</td><td></td></tr><tr><td>popper-class</td><td>Nom de classe pour le menu déroulant du DateTimePicker.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>range-separator</td><td>Séparateur de plage.</td><td>string</td><td>-</td><td>'-'</td></tr><tr><td>default-value</td><td>Date par défaut du calendrier, optionnelle.</td><td>Date</td><td>N'importe quelle valeur acceptée par <code>new Date()</code></td><td>—</td></tr><tr><td>default-time</td><td>L'horaire par défaut après avoir choisi une date.</td><td>normal: string / plage de dates: string[]</td><td>normal: un string tel que <code>12:00:00</code>, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, <code>00:00:00</code> est utilisé.</td><td>—</td></tr><tr><td>name</td><td>Identique au <code>name</code> de l'input natif</td><td>string</td><td>—</td><td>—</td></tr><tr><td>unlink-panels</td><td>Rend indépendants les deux panneaux de plage de dates</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>prefix-icon</td><td>Icône de préfixe.</td><td>string</td><td>—</td><td>el-icon-date</td></tr><tr><td>clear-icon</td><td>Icône de reset</td><td>string</td><td>—</td><td>el-icon-circle-close</td></tr></tbody></table><h3 id=\"options-du-picker\"><a class=\"header-anchor\" href=\"#options-du-picker\">¶</a> Options du Picker</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>shortcuts</td><td>Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous</td><td>object[]</td><td>—</td><td>—</td></tr><tr><td>disabledDate</td><td>Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean</td><td>function</td><td>—</td><td>—</td></tr><tr><td>cellClassName</td><td>set custom className</td><td>Function(Date)</td><td>—</td><td>—</td></tr><tr><td>firstDayOfWeek</td><td>Le premier jour de la semaine</td><td>Number</td><td>1 à 7</td><td>7</td></tr></tbody></table><h3 id=\"raccourcis\"><a class=\"header-anchor\" href=\"#raccourcis\">¶</a> Raccourcis</h3><table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>text</td><td>Titre du raccourci.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>onClick</td><td>Callback se déclenchant quand le raccourci est cliqué, avec <code>vm</code> en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement <code>pick</code>. Exemple: <code>vm.$emit('pick', new Date())</code></td><td>function</td><td>—</td><td>—</td></tr></tbody></table><h3 id=\"evenements\"><a class=\"header-anchor\" href=\"#evenements\">¶</a> Évènements</h3><table><thead><tr><th>Nom</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>change</td><td>Se déclenche quand l'utilisateur confirme la valeur</td><td>component's binding value</td></tr><tr><td>blur</td><td>Se déclenche quand le champ perds le focus.</td><td>component instance</td></tr><tr><td>focus</td><td>Se déclenche quand le champ a le focus.</td><td>component instance</td></tr></tbody></table><h3 id=\"methodes\"><a class=\"header-anchor\" href=\"#methodes\">¶</a> Méthodes</h3><table><thead><tr><th>Méthode</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>focus</td><td>Focus sur le champ.</td><td>—</td></tr></tbody></table>", 10);
|
|
|
|
function datetime_pickervue_type_template_id_11b635f8_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
|
|
|
|
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
|
|
|
|
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
|
|
|
|
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
|
|
|
|
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", datetime_pickervue_type_template_id_11b635f8_hoisted_1, [datetime_pickervue_type_template_id_11b635f8_hoisted_2, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_7];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [datetime_pickervue_type_template_id_11b635f8_hoisted_6];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_8, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_10];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_9];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_11, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
|
|
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
|
|
}),
|
|
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_13];
|
|
}),
|
|
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
|
|
return [_hoisted_12];
|
|
}),
|
|
_: 1
|
|
}), _hoisted_14]);
|
|
}
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/datetime-picker.md?vue&type=template&id=11b635f8
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
var helpers_extends = __webpack_require__(7);
|
|
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/fr-FR/datetime-picker.md?vue&type=script&lang=ts
|
|
|
|
|
|
/* harmony default export */ var datetime_pickervue_type_script_lang_ts = ({
|
|
name: 'component-doc',
|
|
components: {
|
|
"element-demo0": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Défaut", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Avec raccourcis", -1);
|
|
|
|
var _hoisted_5 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_6 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Avec horaire par défaut", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Selectionnez date et horaire"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Selectionnez date et horaire",
|
|
"picker-options": _ctx.pickerOptions
|
|
}, null, 8, ["modelValue", "picker-options"])]), _createVNode("div", _hoisted_5, [_hoisted_6, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value3,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
|
|
return _ctx.value3 = $event;
|
|
}),
|
|
type: "datetime",
|
|
placeholder: "Selectionnez date et horaire",
|
|
"default-time": "12:00:00"
|
|
}, null, 8, ["modelValue"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: 'Aujourdh\'ui',
|
|
onClick: function onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
}
|
|
}, {
|
|
text: 'Hier',
|
|
onClick: function onClick(picker) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.emit('pick', date);
|
|
}
|
|
}, {
|
|
text: 'Il y a une semaine',
|
|
onClick: function onClick(picker) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.emit('pick', date);
|
|
}
|
|
}]
|
|
},
|
|
value1: '',
|
|
value2: '',
|
|
value3: ''
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo1": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Défaut", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Avec raccourcis", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"range-separator": "à",
|
|
"start-placeholder": "Date de début",
|
|
"end-placeholder": "Date de fin"
|
|
}, null, 8, ["modelValue"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"picker-options": _ctx.pickerOptions,
|
|
"range-separator": "à",
|
|
"start-placeholder": "Date de début",
|
|
"end-placeholder": "Date de fin",
|
|
align: "right"
|
|
}, null, 8, ["modelValue", "picker-options"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: 'La semaine passée',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: 'Le mois dernier',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: 'Les 2 derniers mois',
|
|
onClick: function onClick(picker) {
|
|
var end = new Date();
|
|
var start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
|
value2: ''
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}(),
|
|
"element-demo2": function () {
|
|
var _createVNode = vue_esm_browser["o" /* createVNode */],
|
|
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
|
|
_openBlock = vue_esm_browser["G" /* openBlock */],
|
|
_createBlock = vue_esm_browser["j" /* createBlock */];
|
|
var _hoisted_1 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Heure de la date de début 12:00:00", -1);
|
|
|
|
var _hoisted_3 = {
|
|
class: "block"
|
|
};
|
|
|
|
var _hoisted_4 = /*#__PURE__*/_createVNode("span", {
|
|
class: "demonstration"
|
|
}, "Heure de la date de début 12:00:00, heure de la date de fin 08:00:00", -1);
|
|
|
|
function render(_ctx, _cache) {
|
|
var _component_el_date_picker = _resolveComponent("el-date-picker");
|
|
|
|
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value1,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
|
|
return _ctx.value1 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
"start-placeholder": "Date de début",
|
|
"end-placeholder": "Date de fin",
|
|
"default-time": _ctx.defaultTime1
|
|
}, null, 8, ["modelValue", "default-time"])]), _createVNode("div", _hoisted_3, [_hoisted_4, _createVNode(_component_el_date_picker, {
|
|
modelValue: _ctx.value2,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
|
|
return _ctx.value2 = $event;
|
|
}),
|
|
type: "datetimerange",
|
|
align: "right",
|
|
"start-placeholder": "Date de début",
|
|
"end-placeholder": "Date de fin",
|
|
"default-time": _ctx.defaultTime2
|
|
}, null, 8, ["modelValue", "default-time"])])]);
|
|
}
|
|
|
|
var democomponentExport = {
|
|
data: function data() {
|
|
return {
|
|
value1: '',
|
|
value2: '',
|
|
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)],
|
|
// '12:00:00'
|
|
defaultTime2: [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)] // '12:00:00', '08:00:00'
|
|
|
|
};
|
|
}
|
|
};
|
|
return extends_default()({
|
|
render: render
|
|
}, democomponentExport);
|
|
}()
|
|
}
|
|
});
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/datetime-picker.md?vue&type=script&lang=ts
|
|
|
|
// CONCATENATED MODULE: ./website/docs/fr-FR/datetime-picker.md
|
|
|
|
|
|
|
|
datetime_pickervue_type_script_lang_ts.render = datetime_pickervue_type_template_id_11b635f8_render
|
|
|
|
/* harmony default export */ var datetime_picker = __webpack_exports__["default"] = (datetime_pickervue_type_script_lang_ts);
|
|
|
|
/***/ })
|
|
|
|
}]); |