Bài 15: Tìm hiểu Ion-datatime

Bài 15: Tìm hiểu Ion-datatime

codersulution Thứ Tư, tháng 8 24, 2022

  

 Ion-datatime

Lịch ngày hiển thị giao diện bộ chọn từ cuối trang, giúp người dùng dễ dàng chọn ngày và giờ. Bộ chọn hiển thị các cột có thể cuộn được có thể được sử dụng để chọn riêng các giá trị năm, tháng, ngày, giờ và phút. Datetimes tương tự như các inputphần tử gốc của loại datetime-local, tuy nhiên, thành phần Datetime của Ionic giúp dễ dàng hiển thị ngày và giờ ở định dạng ưa thích và quản lý các giá trị ngày giờ.

Display and Picker Formats

Thành phần datetime hiển thị các giá trị ở hai nơi: trong <ion-datetime>thành phần và trong giao diện bộ chọn được trình bày từ cuối màn hình. Biểu đồ sau liệt kê tất cả các định dạng có thể được sử dụng.

định dạngSự miêu tảThí dụ
YYYYNăm, 4 chữ số2018
YYNăm, 2 chữ số18
Mtháng1 ... 12
MMTháng, số 0 đứng đầu01 ... 12
MMMTháng, tên viết tắtJan
MMMMTháng, tên đầy đủJanuary
Dngày1 ... 31
DDNgày, số 0 phía trước01 ... 31
DDDNgày, tên viết tắtFri
DDDDNgày, họ tênFriday
HGiờ, 24 giờ0 ... 23
HHGiờ, 24 giờ, số 0 phía trước00 ... 23
hGiờ, 12 giờ1 ... 12
hhGiờ, 12 giờ, số 0 phía trước01 ... 12
aKhoảng thời gian 12 giờ, chữ thườngam pm
AKhoảng thời gian 12 giờ, chữ hoaAM PM
mPhút1 ... 59
mmPhút, số 0 phía trước01 ... 59
sThứ hai1 ... 59
ssThứ hai, số 0 đứng đầu01 ... 59
ZChênh lệch múi giờ UTCZ or +HH:mm or -HH:mm

Important: Month Names and Day of the Week Names phần bên dưới về cách sử dụng các tên khác nhau cho tháng và ngày.

Display Format

Các displayFormatquy định cụ thể tài sản như thế nào giá trị của một datetime sẽ được in, như định dạng văn bản, trong thành phần datetime.

Một vài ví dụ được cung cấp trong biểu đồ dưới đây. Các định dạng được đề cập ở trên có thể được chuyển sang định dạng hiển thị trong bất kỳ sự kết hợp nào.

Định dạng hiển thịThí dụ
M-YYYY6-2005
MM/YY06/05
MMM YYYYJun 2005
YYYY, MMMM2005, June
MMM DD, YYYY HH:mmJun 17, 2005 11:06
Important: ion-datetime theo mặc định sẽ hiển thị các giá trị liên quan đến múi giờ của người dùng. Với giá trị là 09:00:00+01:00, thành phần ngày giờ sẽ hiển thị nó như 04:00:00-04:00cho người dùng trong khoảng thời gian -04:00 bù đắp. Để thay đổi màn hình để sử dụng múi giờ khác, hãy sử dụng thuộc tính displayTimezone được mô tả bên dưới.

Display Timezone(hiển thị múi giờ)

Các display Timezone  cho phép bạn thay đổi hành vi mặc định hiển thị các giá trị tương ứng với múi giờ địa phương của người dùng. Ngoài các giá trị múi giờ hợp lệ "UTC" được xác định bởi trình duyệt và trong hầu hết các trường hợp, theo tên múi giờ của Cơ sở dữ liệu múi giờ IANA , chẳng hạn như "Châu Á / Thượng Hải", "Châu Á / Kolkata", "Châu Mỹ / New_York ". Trong ví dụ sau:


  <ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>

Giá trị được hiển thị sẽ không được chuyển đổi và sẽ được hiển thị như đã cung cấp (UTC).

Picker Format

Các pickerFormat xác định các cột sẽ được hiển thị trong giao diện bảng chọn, thứ tự của các cột, và định dạng để sử dụng trong mỗi cột. Nếu pickerFormat không được cung cấp thì nó sẽ sử dụng giá trị của displayFormat. Tham khảo biểu đồ trong Display Format cho một số ví dụ định dạng.

Datetime Data

Về mặt lịch sử, việc xử lý các giá trị ngày giờ trong JavaScript, hoặc thậm chí trong các đầu vào HTML, luôn là một thách thức. Cụ thể, Dateđối tượng của JavaScript nổi tiếng là khó phân tích cú pháp chính xác các chuỗi ngày giờ hoặc định dạng các giá trị ngày giờ. Tệ hơn nữa là cách các trình duyệt và phiên bản JavaScript khác nhau phân tích cú pháp các chuỗi ngày giờ khác nhau, đặc biệt là theo ngôn ngữ.

May mắn thay, đầu vào ngày giờ của Ionic đã được thiết kế để các nhà phát triển có thể tránh được những cạm bẫy phổ biến, cho phép các nhà phát triển dễ dàng định dạng các giá trị ngày giờ trong đầu vào và cung cấp cho người dùng một công cụ chọn ngày giờ đơn giản để có trải nghiệm người dùng tuyệt vời.

IOS 8601 Datetime Format: YYYY-MM-DDTHH:mmz

Ionic sử dụng định dạng ngày giờ ISO 8601 cho giá trị của nó. Giá trị chỉ đơn giản là một chuỗi, thay vì sử dụng Dateđối tượng của JavaScript . Sử dụng định dạng ngày giờ ISO giúp dễ dàng tuần tự hóa và phân tích cú pháp trong các đối tượng và cơ sở dữ liệu JSON.

Định dạng ISO có thể được sử dụng như một năm đơn giản, hoặc chỉ giờ và phút, hoặc chi tiết hơn đến mili giây và múi giờ. Bất kỳ định dạng ISO nào dưới đây đều có thể được sử dụng và sau khi người dùng chọn một giá trị mới, Ionic sẽ tiếp tục sử dụng cùng một định dạng ISO mà giá trị datetime ban đầu được cung cấp.

 

DescriptionFormatDatetime Value Example
YearYYYY1994
Year and MonthYYYY-MM1994-12
Complete DateYYYY-MM-DD1994-12-15
Date and TimeYYYY-MM-DDTHH:mm1994-12-15T13:47
UTC TimezoneYYYY-MM-DDTHH:mm:ssTZD1994-12-15T13:47:20.789Z
Timezone OffsetYYYY-MM-DDTHH:mm:ssTZD1994-12-15T13:47:20.789+05:00
Hour and MinuteHH:mm13:47
Hour, Minute, SecondHH:mm:ss13:47:20

Lưu ý rằng năm luôn có bốn chữ số, mili giây (nếu được thêm vào) luôn là ba chữ số và tất cả các năm khác luôn là hai chữ số. Vì vậy, số đại diện cho tháng Giêng luôn có số 0 ở đầu, chẳng hạn như 01. Thêm vào đó, giờ lúc nào cũng có định dạng 24 giờ, vì vậy 00là 12amtrên một đồng hồ 12 giờ, 13phương tiện 1pmvà 23phương tiện 11pm.

Cũng lưu ý rằng không displayFormathoặc không pickerFormatcó thể đặt đầu ra của giá trị datetime, là giá trị được đặt bởi thành phần ngModel. Các định dạng chỉ đơn thuần để hiển thị giá trị dưới dạng văn bản và giao diện của bộ chọn, nhưng giá trị của ngày giờ luôn tồn tại dưới dạng chuỗi ngày giờ hợp lệ ISO 8601.

 Min and Max Datetimes

Lưu ý rằng năm luôn có bốn chữ số, mili giây (nếu được thêm vào) luôn là ba chữ số và tất cả các năm khác luôn là hai chữ số. Vì vậy, số đại diện cho tháng Giêng luôn có số 0 ở đầu, chẳng hạn như 01. Thêm vào đó, giờ lúc nào cũng có định dạng 24 giờ, vì vậy 00là 12amtrên một đồng hồ 12 giờ, 13phương tiện 1pmvà 23phương tiện 11pm.

Cũng lưu ý rằng không displayFormathoặc không pickerFormatcó thể đặt đầu ra của giá trị datetime, là giá trị được đặt bởi thành phần ngModel. Các định dạng chỉ đơn thuần để hiển thị giá trị dưới dạng văn bản và giao diện của bộ chọn, nhưng giá trị của ngày giờ luôn tồn tại dưới dạng chuỗi ngày giờ hợp lệ ISO 8601.

 Month Names and Day of the Week Names

 Tại thời điểm này, không có tiêu chuẩn chung nào phù hợp với tất cả để tự động chọn ngôn ngữ / chính tả chính xác cho tên tháng hoặc tên ngày trong tuần, tùy thuộc vào ngôn ngữ hoặc khu vực.

Tin tốt là có một tiêu chuẩn Intl.DatetimeFormat mà hầu hết các trình duyệt đã áp dụng.

Tuy nhiên, tại thời điểm này, tiêu chuẩn này vẫn chưa được thực hiện đầy đủ bởi tất cả các trình duyệt phổ biến nên Ionic vẫn chưa có sẵn để tận dụng nó.

Ngoài ra, Angular cũng cung cấp dịch vụ quốc tế hóa, nhưng nó vẫn đang được phát triển nặng nên Ionic không phụ thuộc vào nó tại thời điểm này.

Phương pháp hay nhất hiện tại là cung cấp một dãy tên nếu ứng dụng cần sử dụng các tên khác với tên tháng và ngày phiên bản tiếng Anh mặc định. Tên tháng và tên ngày có thể được định cấu hình ở cấp ứng dụng hoặc ion-datetimecấp cá nhân .

 Advanced Datetime Validation and Manipulation

Bộ chọn ngày giờ cung cấp sự đơn giản trong việc chọn định dạng chính xác và duy trì các giá trị ngày giờ dưới dạng chuỗi sử dụng định dạng ngày giờ chuẩn ISO 8601 . Tuy nhiên, điều quan trọng cần lưu ý là ion-datetimekhông cố gắng giải quyết tất cả các tình huống khi xác thực và thao tác các giá trị datetime. Nếu các giá trị datetime cần được phân tích cú pháp từ một định dạng nhất định hoặc thao tác (chẳng hạn như thêm 5 ngày vào một ngày, trừ đi 30 phút, v.v.) hoặc thậm chí định dạng dữ liệu cho một ngôn ngữ cụ thể, thì chúng tôi thực sự khuyên bạn nên sử dụng date-fns để làm việc với ngày tháng trong JavaScript.

Usage

<ion-item>
  <ion-label>MMMM</ion-label>
  <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>MM DD YY</ion-label>
  <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Disabled</ion-label>
  <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>YYYY</ion-label>
  <ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="stacked">MMMM YY</ion-label>
  <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
  <ion-datetime value="1995-04-15" min="1990-02" max="2000"
    [dayShortNames]="customDayShortNames"
    displayFormat="DDD. MMM DD, YY"
    monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>D MMM YYYY H:mm</ion-label>
  <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDDD MMM D, YYYY</ion-label>
  <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>HH:mm</ion-label>
  <ion-datetime displayFormat="HH:mm"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>h:mm a</ion-label>
  <ion-datetime displayFormat="h:mm a"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>hh:mm A (15 min steps)</ion-label>
  <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Leap years, summer months</ion-label>
  <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" [yearValues]="customYearValues"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Specific days/months/years</ion-label>
  <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
</ion-item>
CopyCopied
@Component({…})
export class MyComponent {
  customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
  customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
  customPickerOptions: any;

  constructor() {
    this.customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }
  }

}
<ion-item>
  <ion-label>MMMM</ion-label>
  <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>MM DD YY</ion-label>
  <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Disabled</ion-label>
  <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>YYYY</ion-label>
  <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="stacked">MMMM YY</ion-label>
  <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
  <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
    display-format="DDD. MMM DD, YY"
    month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>D MMM YYYY H:mm</ion-label>
  <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDDD MMM D, YYYY</ion-label>
  <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>HH:mm</ion-label>
  <ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>h:mm a</ion-label>
  <ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>hh:mm A (15 min steps)</ion-label>
  <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Leap years, summer months</ion-label>
  <ion-datetime id="customYearValues" display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Specific days/months/years</ion-label>
  <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
CopyCopied
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
var customYearValues = document.getElementById('customYearValues');
customYearValues.yearValues = yearValuesArray;

var dayShortNamesArray = [
  's\u00f8n',
  'man',
  'tir',
  'ons',
  'tor',
  'fre',
  'l\u00f8r'
];
var customDayShortNames = document.getElementById('customDayShortNames');
customDayShortNames.dayShortNames = dayShortNamesArray;

var customPickerButtons = {
  buttons: [{
    text: 'Save',
    handler: () => console.log('Clicked Save!')
  }, {
    text: 'Log',
    handler: () => {
      console.log('Clicked Log. Do not Dismiss.');
      return false;
    }
  }]
}
var customPickerOptions = document.getElementById('customPickerOptions');
customPickerOptions.pickerOptions = customPickerButtons;
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react';

const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];

const customDayShortNames = [
  's\u00f8n',
  'man',
  'tir',
  'ons',
  'tor',
  'fre',
  'l\u00f8r'
];

export const DateTimeExamples: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonDatetime Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonItem>
          <IonLabel>MMMM</IonLabel>
          <IonDatetime displayFormat="MMMM" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>MM DD YY</IonLabel>
          <IonDatetime displayFormat="MM DD YY" placeholder="Select Date" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>Disabled</IonLabel>
          <IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>YYYY</IonLabel>
          <IonDatetime pickerOptions={{
            buttons: [
              {
                text: 'Save',
                handler: () => console.log('Clicked Save!')
              }, {
                text: 'Log',
                handler: () => {
                  console.log('Clicked Log. Do not Dismiss.');
                  return false;
                }
              }
            ]
          }}
            placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
          </IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="stacked">MMMM YY</IonLabel>
          <IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">MM/DD/YYYY</IonLabel>
          <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">MM/DD/YYYY</IonLabel>
          <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
          <IonDatetime
            min="1990-02"
            max="2000"
            dayShortNames={customDayShortNames}
            displayFormat="DDD. MMM DD, YY"
            monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
          ></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>D MMM YYYY H:mm</IonLabel>
          <IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>DDDD MMM D, YYYY</IonLabel>
          <IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>HH:mm</IonLabel>
          <IonDatetime displayFormat="HH:mm" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>h:mm a</IonLabel>
          <IonDatetime displayFormat="h:mm a" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>hh:mm A (15 min steps)</IonLabel>
          <IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>Leap years, summer months</IonLabel>
          <IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues} value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>Specific days/months/years</IonLabel>
          <IonDatetime
            monthValues='6,7,8'
            yearValues='2014,2015'
            dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"
            displayFormat="DD/MMM/YYYY"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
          ></IonDatetime>
        </IonItem>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          Selected Date: {selectedDate ?? '(none)'}
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};
import { Component, h } from '@stencil/core';

@Component({
  tag: 'datetime-example',
  styleUrl: 'datetime-example.css'
})
export class DatetimeExample {
  private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
  private customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
  private customPickerOptions = {
    buttons: [{
      text: 'Save',
      handler: () => console.log('Clicked Save!')
    }, {
      text: 'Log',
      handler: () => {
        console.log('Clicked Log. Do not Dismiss.');
        return false;
      }
    }]
  }

  render() {
    return [
      <ion-item>
        <ion-label>MMMM</ion-label>
        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>MM DD YY</ion-label>
        <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>Disabled</ion-label>
        <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>YYYY</ion-label>
        <ion-datetime pickerOptions={this.customPickerOptions} placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label position="stacked">MMMM YY</ion-label>
        <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label position="floating">MM/DD/YYYY</ion-label>
        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label position="floating">MM/DD/YYYY</ion-label>
        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
        <ion-datetime value="1995-04-15" min="1990-02" max="2000"
          dayShortNames={this.customDayShortNames}
          displayFormat="DDD. MMM DD, YY"
          monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>D MMM YYYY H:mm</ion-label>
        <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>DDDD MMM D, YYYY</ion-label>
        <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>HH:mm</ion-label>
        <ion-datetime displayFormat="HH:mm"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>h:mm a</ion-label>
        <ion-datetime displayFormat="h:mm a"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>hh:mm A (15 min steps)</ion-label>
        <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>Leap years, summer months</ion-label>
        <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={this.customYearValues}></ion-datetime>
      </ion-item>,

      <ion-item>
        <ion-label>Specific days/months/years</ion-label>
        <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
      </ion-item>
    ];
  }
}
<template>
  <ion-item>
    <ion-label>MMMM</ion-label>
    <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>MM DD YY</ion-label>
    <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Disabled</ion-label>
    <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>YYYY</ion-label>
    <ion-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">MMMM YY</ion-label>
    <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="floating">MM/DD/YYYY</ion-label>
    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="floating">MM/DD/YYYY</ion-label>
    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
    <ion-datetime value="1995-04-15" min="1990-02" max="2000"
      :day-short-names="customDayShortNames"
      display-format="DDD. MMM DD, YY"
      month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>D MMM YYYY H:mm</ion-label>
    <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDDD MMM D, YYYY</ion-label>
    <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>HH:mm</ion-label>
    <ion-datetime display-format="HH:mm"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>h:mm a</ion-label>
    <ion-datetime display-format="h:mm a"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>hh:mm A (15 min steps)</ion-label>
    <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Leap years, summer months</ion-label>
    <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Specific days/months/years</ion-label>
    <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
  </ion-item>
</template>

<script>
import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonDatetime, IonItem, IonLabel },
  setup() {
    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
    const customDayShortNames = [
      's\u00f8n',
      'man',
      'tir',
      'ons',
      'tor',
      'fre',
      'l\u00f8r'
    ];
    const customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }

    return {
      customYearValues,
      customDayShortNames,
      customPickerOptions
    }
  }
});
</script>

Properties

cancelText

Description

The text to display on the picker's cancel button.

Attributecancel-text
Typestring
Default'Cancel'

dayNames

Description

Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.

Attributeday-names
Typestring | string[] | undefined

dayShortNames

Description

Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. Defaults to: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

Attributeday-short-names
Typestring | string[] | undefined

dayValues

Description

Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the dayValues input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like 31 in February, it will correctly not show days which are not valid for the selected month.

Attributeday-values
Typenumber | number[] | string | undefined

disabled

Description

If true, the user cannot interact with the datetime.

Attributedisabled
Typeboolean
Defaultfalse

displayFormat

Description

The display format of the date and time as text that shows within the item. When the pickerFormat input is not used, then the displayFormat is used for both display the formatted text, and determining the datetime picker's columns. See the pickerFormat input description for more info. Defaults to MMM D, YYYY.

Attributedisplay-format
Typestring
Default'MMM D, YYYY'

displayTimezone

Description

The timezone to use for display purposes only. See Date.prototype.toLocaleString() for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.

Attributedisplay-timezone
Typestring | undefined

doneText

Description

The text to display on the picker's "Done" button.

Attributedone-text
Typestring
Default'Done'

hourValues

Description

Values used to create the list of selectable hours. By default the hour values range from 0 to 23 for 24-hour, or 1 to 12 for 12-hour. However, to control exactly which hours to display, the hourValues input can take a number, an array of numbers, or a string of comma separated numbers.

Attributehour-values
Typenumber | number[] | string | undefined

max

Description

The maximum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, 1996-12-19. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as 1994. Defaults to the end of this year.

Attributemax
Typestring | undefined

min

Description

The minimum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, such as 1996-12-19. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as 1994. Defaults to the beginning of the year, 100 years ago from today.

Attributemin
Typestring | undefined

minuteValues

Description

Values used to create the list of selectable minutes. By default the minutes range from 0 to 59. However, to control exactly which minutes to display, the minuteValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be minuteValues="0,15,30,45".

Attributeminute-values
Typenumber | number[] | string | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

monthNames

Description

Full names for each month name. This can be used to provide locale month names. Defaults to English.

Attributemonth-names
Typestring | string[] | undefined

monthShortNames

Description

Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.

Attributemonth-short-names
Typestring | string[] | undefined

monthValues

Description

Values used to create the list of selectable months. By default the month values range from 1 to 12. However, to control exactly which months to display, the monthValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be monthValues="6,7,8". Note that month numbers do not have a zero-based index, meaning January's value is 1, and December's is 12.

Attributemonth-values
Typenumber | number[] | string | undefined

name

Description

The name of the control, which is submitted with the form data.

Attributename
Typestring
Defaultthis.inputId

pickerFormat

Description

The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use displayFormat.

Attributepicker-format
Typestring | undefined

pickerOptions

Description

Any additional options that the picker interface can accept. See the Picker API docs for the picker options.

Typeundefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: Mode | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; }

placeholder

Description

The text to display when there's no date selected yet. Using lowercase to match the input attribute

Attributeplaceholder
Typenull | string | undefined

readonly

Description

If true, the datetime appears normal but is not interactive.

Attributereadonly
Typeboolean
Defaultfalse

value

Description

The value of the datetime as a valid ISO 8601 datetime string.

Attributevalue
Typenull | string | undefined

yearValues

Description

Values used to create the list of selectable years. By default the year values range between the min and max datetime inputs. However, to control exactly which years to display, the yearValues input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be yearValues="2024,2020,2016,2012,2008".

Attributeyear-values
Typenumber | number[] | string | undefined

Events

NameDescription
ionBlurEmitted when the datetime loses focus.
ionCancelEmitted when the datetime selection was cancelled.
ionChangeEmitted when the value (selected date) has changed.
ionFocusEmitted when the datetime has focus.

Menthods

open

Description

Opens the datetime overlay.

Signatureopen() => Promise<void>

Css Shadow Parts

NameDescription
placeholderThe placeholder of the datetime.
textThe value of the datetime.

CSS Custom properties

NameDescription
--padding-bottomBottom padding of the datetime
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime
--padding-topTop padding of the datetime
--placeholder-colorColor of the datetime placeholder


codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash