@timus-networks/theme 1.0.21 → 1.0.24

package/components-js/ThemeTag.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic</h1>
+      <p class="p-lg my-6">
+        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag :disable-transitions="true">Tag 1</el-tag>
+        <el-tag type="success">Tag 2</el-tag>
+        <el-tag type="info">Tag 3</el-tag>
+        <el-tag type="warning">Tag 4</el-tag>
+        <el-tag type="danger">Tag 5</el-tag>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Removable</h1>
+      <p class="p-lg my-6">
+        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
+          {{ tag.name }}
+        </el-tag>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Sizes</h1>
+      <p class="p-lg my-6">Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag>Default</el-tag>
+        <el-tag size="large">Large</el-tag>
+        <el-tag size="medium">Medium</el-tag>
+        <el-tag size="small">Small</el-tag>
+        <el-tag size="mini">Mini</el-tag>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Edit Dynamically</h1>
+      <p class="p-lg my-6">You can use the close event to add and remove tag dynamically.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="true" @close="handleClose(tag)">
+          {{ tag }}
+        </el-tag>
+        <el-input
+          class="input-new-tag"
+          v-if="inputVisible"
+          v-model="inputValue"
+          ref="saveTagInput"
+          size="mini"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+        >
+        </el-input>
+        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusButtonSample',
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+  data() {
+    return {
+      dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+      inputVisible: false,
+      inputValue: '',
+      tags: [
+        { name: 'Tag 1', type: '' },
+        { name: 'Tag 2', type: 'success' },
+        { name: 'Tag 3', type: 'info' },
+        { name: 'Tag 4', type: 'warning' },
+        { name: 'Tag 5', type: 'danger' },
+      ],
+      items: [
+        { type: '', label: 'Tag 1' },
+        { type: 'success', label: 'Tag 2' },
+        { type: 'info', label: 'Tag 3' },
+        { type: 'danger', label: 'Tag 4' },
+        { type: 'warning', label: 'Tag 5' },
+      ],
+    };
+  },
+  methods: {
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+  },
+});
+</script>

package/components-js/ThemeTimePicker.vue

@@ -1,44 +1,92 @@
 <template>
   <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Popover</h1>
     <section>
-      <h1>Popover</h1>
-      <p class="p-lg my-6">
-        Popover bileşeni, kullanıcı tıkladığında veya üzerine geldiğinde ek bilgileri veya eylemleri göstermek için kullanılır. Örneğinizde, farklı
-        yönlere (right, bottom, top, left) yerleştirilmiş dört popover var. Her bir popover, içeriğini ve başlığını göstermek için bir tetikleyici
-        düğme (el-button) kullanır.
+      <h2>Basic Usage</h2>
+      <p class="p-md-c my-6">Hover on the dropdown menu to unfold it for more actions.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>Action 1</el-dropdown-item>
+            <el-dropdown-item>Action 2</el-dropdown-item>
+            <el-dropdown-item>Action 3</el-dropdown-item>
+            <el-dropdown-item disabled>Action 4</el-dropdown-item>
+            <el-dropdown-item divided>Action 5</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-dropdown trigger="click">
+          <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>Action 1</el-dropdown-item>
+            <el-dropdown-item>Action 2</el-dropdown-item>
+            <el-dropdown-item>Action 3</el-dropdown-item>
+            <el-dropdown-item>Action 4</el-dropdown-item>
+            <el-dropdown-item>Action 5</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-dropdown split-button type="primary">
+          Dropdown List
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>Action 1</el-dropdown-item>
+            <el-dropdown-item>Action 2</el-dropdown-item>
+            <el-dropdown-item>Action 3</el-dropdown-item>
+            <el-dropdown-item>Action 4</el-dropdown-item>
+            <el-dropdown-item>Action 5</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-popover placement=&quot;right&quot; title=&quot;Başlık&quot; trigger=&quot;click&quot;&gt; &lt;el-button
+            slot=&quot;reference&quot;&gt;Tıkla&lt;/el-button&gt; &lt;/el-popover&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <h1>Popover</h1>
+    <section>
+      <h2>Temel Kullanım</h2>
+      <p class="p-md-c my-6">
+        Popover bileşeni, kullanıcının üzerine geldiğinde veya tıkladığında ek bilgileri veya eylemleri görüntülemek için kullanılır. Örneğinizde,
+        farklı yönlere (sağ, alt, üst, sol) yerleştirilmiş dört popover örneği bulunmaktadır. Her bir popover, içeriğini ve başlığını göstermek için
+        bir tetikleyici düğme (el-button) kullanmaktadır.
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-popover placement="right" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
-          <el-button slot="reference">Right</el-button>
+        <el-popover placement="right" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
+          <el-button slot="reference">Sağ</el-button>
         </el-popover>
-        <el-popover placement="bottom" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
-          <el-button slot="reference">Bottom</el-button>
+        <el-popover placement="bottom" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
+          <el-button slot="reference">Alt</el-button>
         </el-popover>
-        <el-popover placement="top" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
-          <el-button slot="reference">Top</el-button>
+        <el-popover placement="top" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
+          <el-button slot="reference">Üst</el-button>
         </el-popover>
-        <el-popover placement="left" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
-          <el-button slot="reference">Left</el-button>
+        <el-popover placement="left" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
+          <el-button slot="reference">Sol</el-button>
         </el-popover>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           <code>
-            &lt;el-popover placement=&quot;right&quot; title=&quot;Popover Title&quot; trigger=&quot;click&quot;&gt; &lt;el-button
-            slot=&quot;reference&quot;&gt;Click Me&lt;/el-button&gt; &lt;/el-popover&gt;
+            &lt;el-popover placement=&quot;right&quot; title=&quot;Başlık&quot; trigger=&quot;click&quot;&gt; &lt;el-button
+            slot=&quot;reference&quot;&gt;Tıkla&lt;/el-button&gt; &lt;/el-popover&gt;
           </code>
         </p>
       </div>
     </section>
 
+    <h1>TimePicker</h1>
     <section>
-      <h1>Fixed time picker</h1>
-      <p class="p-lg my-6">
-        Fixed Time Picker, kullanıcının sabit zaman aralıklarından birini seçmesine olanak tanır. Bu örnekte, saat 08:30 ile 18:30 arasında 15
-        dakikalık adımlarla sabit zaman dilimleri belirlenmiştir. Kullanıcı bu zamanlardan birini seçebilir.
+      <h2>Fixed time picker</h2>
+      <p class="p-md-c my-6">
+        Sabit Zaman Seçici, DateTimePicker bileşeninin bir parçasıdır ve kullanıcının belirli bir zaman aralığını seçmesine olanak tanır. DatePicker
+        ve TimePicker'dan türetilmiştir ve kullanımı oldukça basittir.
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Select time"> </el-time-select>
+        <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Zaman Seçin"> </el-time-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -51,37 +99,38 @@
     </section>
 
     <section>
-      <h1>Arbitrary time picker</h1>
-      <p class="p-lg my-6">
-        Arbitrary Time Picker, kullanıcıya belirli bir zaman aralığında serbestçe zaman seçme imkanı sunar. Örneğinizde, seçilebilir zaman aralığı
-        18:30 - 20:30 arasındadır. Kullanıcılar bu zaman aralığı içinde herhangi bir zamanı seçebilirler.
+      <h2>Arbitrary time picker</h2>
+      <p class="p-md-c my-6">
+        Keyfi Zaman Seçici, etiket kullanarak el-time-picker'ı kullanmanıza ve seçilebilir zaman aralığını belirleyerek zamanı sınırlamanıza olanak
+        tanır. Varsayılan olarak, zamanı seçmek için fare tekerleğini kullanabilirsiniz. Alternatif olarak, arrow-control özelliği
+        etkinleştirildiğinde kontrol oklarını kullanabilirsiniz.
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Arbitrary time"> </el-time-picker>
-        <el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Arbitrary time">
+        <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin"> </el-time-picker>
+        <el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin">
         </el-time-picker>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           <code>
-            &lt;el-time-picker v-model=&quot;value&quot; :picker-options=&quot;{ selectableRange: '18:30:00 - 20:30:00'
-            }&quot;&gt;&lt;/el-time-picker&gt;
+            &lt;el-time-picker v-model=&quot;value1&quot; :picker-options=&quot;{ selectableRange: '18:30:00 - 20:30:00' }&quot;
+            placeholder=&quot;Zaman Seçin&quot;&gt;&lt;/el-time-picker&gt;
           </code>
         </p>
       </div>
     </section>
 
     <section>
-      <h1>Fixed time range</h1>
-      <p class="p-lg my-6">
-        Bu bileşen, kullanıcıya sabit bir zaman aralığında başlangıç ve bitiş zamanları seçme olanağı sunar. İki el-time-select bileşeni kullanılarak,
-        kullanıcılar belirli bir zaman aralığı içinde başlangıç ve bitiş zamanlarını seçebilirler.
+      <h2>Fixed time range</h2>
+      <p class="p-md-c my-6">
+        Sabit Zaman Aralığı Seçici, belirli bir başlangıç ve bitiş zamanı arasında zaman seçmenizi sağlar. Özellikle etkinlik başlangıç ve bitiş
+        zamanları gibi durumlar için uygundur. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-time-select placeholder="Start time" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
+        <el-time-select placeholder="Başlangıç zamanı" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
         </el-time-select>
         <el-time-select
-          placeholder="End time"
+          placeholder="Bitiş zamanı"
           v-model="endTime"
           :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
         >
@@ -90,7 +139,7 @@
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           <code>
-            &lt;el-time-select v-model=&quot;startTime&quot; :picker-options=&quot;{ start: '08:30', step: '00:15', end: '18:30'
+            &lt;el-time-select v-model=&quot;value&quot; :picker-options=&quot;{ start: '08:30', step: '00:15', end: '18:30'
             }&quot;&gt;&lt;/el-time-select&gt;
           </code>
         </p>
@@ -98,21 +147,179 @@
     </section>
 
     <section>
-      <h1>Arbitrary time range</h1>
-      <p class="p-lg my-6">
-        Arbitrary Time Range bileşeni, kullanıcıya serbestçe bir zaman aralığı seçme imkanı tanır. is-range özelliği sayesinde, kullanıcılar başlangıç
-        ve bitiş zamanlarını serbestçe seçebilirler. Bu, zaman aralıklı işlemler için idealdir.
+      <h2>Arbitrary time range</h2>
+      <p class="p-md-c my-6">
+        Keyfi Zaman Aralığı Seçici, isteğe bağlı bir zaman aralığı seçmenizi sağlar. Bu, örneğin randevu veya etkinlikler için belirli bir başlangıç
+        ve bitiş zamanı seçmeniz gerektiğinde kullanışlıdır. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-time-picker is-range v-model="value1" range-separator="To" start-placeholder="Start time" end-placeholder="End time"> </el-time-picker>
-        <el-time-picker is-range arrow-control v-model="value2" range-separator="To" start-placeholder="Start time" end-placeholder="End time">
+        <el-time-picker is-range v-model="arb1" range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı">
+        </el-time-picker>
+        <el-time-picker
+          is-range
+          arrow-control
+          v-model="arb2"
+          range-separator="den"
+          start-placeholder="Başlangıç zamanı"
+          end-placeholder="Bitiş zamanı"
+        >
         </el-time-picker>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           <code>
-            &lt;el-time-picker is-range v-model=&quot;value&quot; start-placeholder=&quot;Start time&quot; end-placeholder=&quot;End
-            time&quot;&gt;&lt;/el-time-picker&gt;
+            &lt;el-time-picker is-range v-model="arb1" range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı">
+            &lt;/el-time-picker>
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <h1>DatePicker</h1>
+    <section>
+      <h2>Enter Date</h2>
+      <p class="p-md-c my-6">
+        Tarih Seçme bileşeni, kullanıcıların takvimden tarih seçmelerini sağlayan kullanışlı bir araçtır. Bu bileşen, özellikle web uygulamalarında
+        tarih seçimi gerektiren durumlarda kullanışlıdır. Kullanıcılar, takvim arayüzü üzerinden bir tarih seçebilir ve seçilen tarih, ilgili uygulama
+        işlemleri için kullanılabilir.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-date-picker v-model="value1" type="date" placeholder="Bir gün seçin"> </el-date-picker>
+        <el-date-picker v-model="value2" type="date" placeholder="Bir gün seçin" :picker-options="pickerOptions"> </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker v-model=&quot;value1&quot; type=&quot;date&quot; placeholder=&quot;Bir gün seçin&quot;&gt;&lt;/el-date-picker&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Other measurements</h2>
+      <p class="p-md-c my-6">
+        Bu bileşen, farklı ölçülerde tarih seçmenizi sağlar. Hafta, ay, yıl ve daha fazlasını seçebilirsiniz. Özelleştirilebilir formatlama
+        seçenekleri ile istediğiniz türde tarihleri seçebilirsiniz.
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xxl:grid-flow-col auto-cols-max gap-4">
+        <el-date-picker class="w-full" v-model="dtp1" type="week" format="Week WW" placeholder="Pick a week"> </el-date-picker>
+        <el-date-picker class="w-full" v-model="dtp2" type="month" placeholder="Pick a month"> </el-date-picker>
+        <el-date-picker class="w-full" v-model="dtp3" type="year" placeholder="Pick a year"> </el-date-picker>
+        <el-date-picker class="w-full" type="dates" v-model="dtp4" placeholder="Pick one or more dates"> </el-date-picker>
+        <el-date-picker class="w-full" type="months" v-model="dtp5" placeholder="Pick one or more months"> </el-date-picker>
+        <el-date-picker class="w-full" type="years" v-model="dtp6" placeholder="Pick one or more years"> </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker class="w-full" v-model="dtp1" type="week" format="Hafta WW" placeholder="Bir hafta seçin">&lt;/el-date-picker>
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Date Range</h2>
+      <p class="p-md-c my-6">Tarih aralığı seçici, bir başlangıç ve bitiş tarihi seçmenize olanak tanır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-date-picker v-model="datr1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
+        </el-date-picker>
+        <el-date-picker
+          v-model="datr2"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="To"
+          start-placeholder="Start date"
+          end-placeholder="End date"
+          :picker-options="pickerOptions"
+        >
+        </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker v-model="value1" type="daterange" range-separator=" - " start-placeholder="Başlangıç tarihi" end-placeholder="Bitiş
+            tarihi">&lt;/el-date-picker>
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Month Range</h2>
+      <p class="p-md-c my-6">Ay aralığı seçici, bir başlangıç ve bitiş ayı seçmenize olanak tanır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş ayı">
+        </el-date-picker>
+        <el-date-picker
+          v-model="value2"
+          type="monthrange"
+          align="right"
+          unlink-panels
+          range-separator=" - "
+          start-placeholder="Başlangıç ayı"
+          end-placeholder="Bitiş ayı"
+          :picker-options="monthOptions"
+        >
+        </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş
+            ayı">&lt;/el-date-picker>
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <h1>DateTimePicker</h1>
+    <section>
+      <h2>Date and time</h2>
+      <p class="p-md-c my-6">
+        DateTimePicker, kullanıcıların tarih ve saat bilgisini seçmelerini sağlayan bir bileşendir. Bu bileşen, DatePicker ve TimePicker
+        bileşenlerinden türetilmiştir ve tarih ile saat seçme işlemini tek bir bileşende birleştirir. Daha fazla ayrıntı için pickerOptions ve diğer
+        özellikler hakkında bilgi almak için DatePicker ve TimePicker dokümantasyonlarına başvurabilirsiniz.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-date-picker v-model="dat1" type="datetime" placeholder="Select date and time"> </el-date-picker>
+        <el-date-picker v-model="dat2" type="datetime" placeholder="Select date and time" :picker-options="dataAndTimeOptions"> </el-date-picker>
+        <el-date-picker v-model="dat3" type="datetime" placeholder="Select date and time" default-time="12:00:00"> </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code> &lt;el-date-picker v-model="dat1" type="datetime" placeholder="Tarih ve saat seçin">&lt;/el-date-picker> </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Date and time range</h2>
+      <p class="p-md-c my-6">
+        Tarih ve Saat Aralığı Seçici (DateTimePicker), kullanıcılara belirli bir zaman dilimini seçme olanağı sunar. Bu bileşen, özellikle randevu
+        veya etkinlik planlaması gibi durumlar için kullanışlıdır. Kullanıcılar başlangıç ve bitiş tarihini veya saati belirleyebilirler.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-date-picker v-model="datr1" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
+        </el-date-picker>
+        <el-date-picker
+          v-model="datr2"
+          type="datetimerange"
+          :picker-options="dateAndTimeRangePickerOption"
+          range-separator="To"
+          start-placeholder="Start date"
+          end-placeholder="End date"
+          align="right"
+        >
+        </el-date-picker>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker v-model="datr1" type="datetimerange" range-separator="den" start-placeholder="Başlangıç tarihi" end-placeholder="Bitiş
+            tarihi">&lt;/el-date-picker>
           </code>
         </p>
       </div>
@@ -129,8 +336,134 @@ export default Vue.extend({
       value: '',
       value1: new Date(2016, 9, 10, 18, 40),
       value2: new Date(2016, 9, 10, 18, 40),
+      arb1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+      arb2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
       startTime: '',
       endTime: '',
+      dataAndTimeOptions: {
+        shortcuts: [
+          {
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            },
+          },
+          {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            },
+          },
+          {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            },
+          },
+        ],
+      },
+      dat1: '',
+      dat2: '',
+      dat3: '',
+      dateAndTimeRangePickerOption: {
+        shortcuts: [
+          {
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+        ],
+      },
+      datr1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      datr2: '',
+      monthOptions: {
+        shortcuts: [
+          {
+            text: 'This month',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()]);
+            },
+          },
+          {
+            text: 'This year',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: 'Last 6 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+        ],
+      },
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            },
+          },
+          {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            },
+          },
+          {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            },
+          },
+        ],
+      },
+      value1: '',
+      value2: '',
+      value3: '',
+      dtp1: '',
+      dtp2: '',
+      dtp3: '',
+      dtp4: '',
+      dtp5: '',
+      dtp6: '',
     };
   },
   methods: {