# Duet tasarım sistemi

## Duet tasarım sistemi Arayüz Önizlemesi

Gidiş ve dönüş tarihlerini belirleyin, geçersiz bir tarih aralığını sınayın ve gün sayısını dahilî olarak hesaplayın.

## Duet tasarım sistemi Tasarım Başvurusu

Duet’in herkese açık belgelerinin anlık görüntüsü: ana sistem bileşenleri, LocalTapiola varsayılan belirteçleri ve belgelenmiş 10.7.0/CDN entegrasyonu. Ayrı @duetds/date-picker 1.x paketi değildir. Bazı radius belirteçleri hâlâ In Review olarak işaretlidir.

### Varsayılan ve Turva rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-primary | #0077b3 | LocalTapiola eylemi. |
| --color-primary-dark | #004b81 | Daha koyu etkileşim durumu. |
| --color-primary-darker | #00619b | Bağlantı rolü. |
| --color-primary-light | #c6e1ee | Aralık tonu. |
| --color-secondary | #082a4d | Gövde metni. |
| --color-primary-turva | #e61740 | Turva eylemi, ayrı tema. |
| --color-danger | #d61c52 | Doğrulama. |
| --radius-default | 4px | Giriş alanları ve kapsayıcılar. |
| --radius-pill | 20rem | Düğmeler. |
| --radius-medium | 8px; In Review | Üretime hazır olduğunu iddia etmeyin. |
### Boşluk belirteçleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --space-xxx-small | 2px | Sıkı. |
| --space-xx-small | 4px | Sıkı. |
| --space-x-small | 8px | Kompakt. |
| --space-small | 12px | Küçük. |
| --space-medium | 16px | Varsayılan. |
| --space-large | 20px | Bileşenler arası. |
| --space-x-large | 28px | Daha geniş aralık. |
| --space-xx-large | 36px | Düğmenin yatay iç boşluğu. |
| --space-xxx-large | 48px | Bölüm. |
| --size-layout-max-width | 1110px | Belgelenmiş düzen üst sınırı. |
### Yazı tipi ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $font-size-medium | 16px / 1rem | Gövde ve H5. |
| $font-size-large | 20px / 1.25rem | H4. |
| $font-size-x-large | 24px / 1.5rem | H3. |
| $font-size-xx-large | 36px / 2.25rem | H2. |
| $font-size-xxx-large | 48px / 3rem | H1. |
| $font-size-xxxx-large | 72px / 4.5rem | H0. |
### Tarih Seçici sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| value / min / max | YYYY-MM-DD strings | Saklanan değer ISO biçimindedir, gösterim metni değildir. |
| duetChange | detail.value and detail.valueAsDate | Tarih seçimi olayı. |
| validity | badInput / valueMissing / rangeOverflow / rangeUnderflow / customError | Kabul etmeden önce inceleyin. |
| setFocus() | Promise<void> | Giriş alanına odaklanır; ana öğenin focus() metoduna değil. |
| show() / hide() | Promise<void> | Takvim ve odak yönetimi. |
| language | Deprecated | html lang kullanın. |
| disallow-weekends | Boolean | Bileşen düzeyinde devre dışı bırakma. |
### Eylem özellikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| variation="primary" | Main action | Her görünümde bir ana eylem kullanın. |
| submit | Boolean, default false | Form gönderimini açıkça etkinleştirin. |
| url | Anchor destination | Gezinme anlamı. |
| expand | 100% container | Geniş eylem. |
| theme | default / turva / inherited empty | Marka seçimi. |
| margin="none" | Remove automatic margin | Uygulama, boşlukları kontrol eder. |
## Duet tasarım sistemi Eksiksiz Rehber

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Duet tasarım sistemi Ana Duet sistemi ile açık kaynaklı seçici birbirinden ayrıdır

### Paket sözleşmesini örneğe ekli tutun

> Duet, LocalTapiola ve Turva için temalı bileşenler ve temeller sunar. Ayrı olarak yayımlanan @duetds/date-picker projesi, kapsamı daha dar bir açık kaynak dağıtımıdır. Etiket adlarının aynı olması; özelliklerinin, yerelleştirme kurulumunun veya CSS değişkenlerinin mevcut ana tasarım sistemiyle birbirinin yerine kullanılabileceği anlamına gelmez.

Bu sayfadaki entegrasyon kodu ana sistemi hedefler. Çevrimdışı önizlemede, bağlantılı Duet belirteçlerini temel alan özgün stiller ve yerel tarih girişleri kullanılır. Takvim açılır penceresini veya klavye modelini Duet çalıştırıyormuş gibi göstermeden tarih aralığı kurallarını örnekler.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Marka mavisi ile durum kırmızısının kullanım amaçları farklıdır

### Tek bir vurgu rengini değiştirmek yerine tema kullanın

Varsayılan LocalTapiola teması, mavi bir eylem rengini koyu mavi gövde metniyle birleştirir. Turva'nın kendine özgü kırmızı bir eylem rengi ve ikincil metin rolü vardır. Yalnızca eylem rengini değiştirmek, temadaki diğer ilişkileri göz ardı eder. Güncel tabloda eski Turva tonları kullanımdan kaldırılmış olarak da işaretlenmiştir; geçmiş paletin tüm öğelerini kopyalamak artık geçerli olmayan yönergeleri korumak olur.

Özgün seyahat tarihi örneğimiz, sonraki eylem için maviyi; yalnızca seçilen tarih aralığının düzeltilmesi gerektiğinde kırmızıyı kullanır. Bu, bir sigorta önerisi, fiyat teklifi veya satın alma işlemi değil, bir planlama gösterimidir.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi 16px gövde metni hiyerarşinin temelini oluşturur

### Ölçek, her yerde dev başlıklar kullanmayı gerektirmez

Duet’in tipografi tablosu büyük boyutlarda 16, 20, 24, 36, 48 ve 72px değerlerinden oluşur. Gömülü bir planlama panelinde, eylemin ve tarih etiketlerinin belirgin kalması için 24px boyutu kullanılır. Pazarlama tasarımlarına yönelik 72px boyut, kompakt bir formun varsayılanı değildir.

LocalTapiola ve Turva yazı tipi paketleri ayrı varlıklardır. Çevrimdışı yorumda sistem yedeği kullanılır; marka yazı tipi dosyaları pakete dahil değildir. Yetkili bir uygulama, seçilen yazı tipi ailesini belgelenmiş yazı tipi yolu üzerinden yüklemeli ve ardından bu aileye uygun kalınlık belirteçlerini kullanmalıdır.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Gerçek 20px ve 28px adımlarını kullanın

### Duet, standart sekiz piksel ölçeğini kullanmaz

Ölçekte, sık kullanılan ikinin kuvvetlerine ek olarak 12, 20, 28 ve 36px değerleri de bulunur. Sistem formunun ritmini yakalamak için bu ara aralıklar önemlidir. Geniş düzende iki alan arasındaki 20px boşluğu kullanın; alanları alt alta yerleştirirken her etiketi kendi alanıyla birlikte tutun. Örnekteki kırılma noktası uygulamaya özgü bir tercihtir.

Varsayılan kontrollerde köşe yarıçapı 4px, düğmelerde ise hap biçimli yarıçap kullanılır. Belirteç başvurusundaki bazı yeni kapsayıcı köşe yarıçapı değerleri açıkça In Review olarak işaretlenmiştir. Bu rehber, listelenen her belirteci onaylanmış gibi sunmak yerine bu durumu korur.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi ISO değerlerini saklayın, görünür biçimi açıklayın

### Yerelleştirilmiş gösterim dizelerini veri olarak ayrıştırmayın

Bileşenin value ve sınır değerleri YYYY-MM-DD biçimindedir. Tarih seçimi olayı hem bir dize hem de bir Date nesnesi içerir. Karşılaştırma ve depolama için dizeyi kullanın; yerelleştirilmiş alan görünümü sunumla ilgili bir konudur. Belge dili, geçerli yerelleştirme giriş noktasıdır; eski language özelliği ise kullanımdan kaldırılmıştır.

Örnek, yalnızca Haziran 2027 içindeki tarihlere izin verir. Bu sabit aralık, testleri tekrarlanabilir kılar ve örneğe özgü bir kısıtlama olduğu açıkça belirtilir. Üretim formunda izin verilen aralık, ürün kuralına göre belirlenmeli ve bu kural alanın yanında açıklanmalıdır.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Geçerli bir tarih, mutlaka geçerli bir aralık anlamına gelmez

### Her iki alan da geçerliyse tarihlerin ilişkisini denetleyin

Bileşenin validity nesnesi, alanlardaki tekil hataları açıklar. Dönüş tarihi, gidiş tarihinden önce olsa da takvim açısından geçerli bir tarih olabilir; bu nedenle uygulama iki tarihi ayrıca denetlemelidir. Yerel örnek, anlaşılır bir hata atar ve iç giriş alanına ulaşan belgelenmiş setFocus() metodunu kullanır.

Gün sayısı başlangıç ve bitiş günlerini kapsar: gidiş ve dönüş aynı gündeyse bir takvim günü sayılır. ISO tarihlerini UTC gece yarısına dönüştürmek, yaz saati değişikliğinin bir takvim aralığını kesirli süreye çevirmesini önler. Bu hesaplama, Duet fiyatlandırma kuralı değil, uygulamaya özgü mantıktır.

1. Eksik, hatalı biçimlendirilmiş veya sınırların dışındaki uç tarihleri reddedin.

2. Gidiş tarihinden önce olan dönüş tarihini reddedin.

3. Düzeltme gereken alana odağı taşıyın.

4. Dahilî tarih aralığını yalnızca her iki denetim de başarılı olduğunda hazırlayın.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Birincil eylem, formun gönderileceği anlamına gelmez

### Duet, açıkça etkinleştirilen bir submit özelliği kullanır

Ana sistem düğmesi, submit ile form gönderimini etkinleştirir; varsayılanı false değeridir. Sunulan bileşim, yerel bir sonuç hazırlayan tıklama eylemini kullandığından bu özelliğe ihtiyaç duymaz. Hedef adres url alanına girilir; bu da bağlantı semantiği sağlar.

Önizleme, girdilerden herhangi biri değiştiğinde hazırlanan mesajı temizler. Aksi hâlde mesaj, ziyaretçinin değiştirdiği değerleri onaylıyormuş gibi görünebilir. Eşzamansız bir işlem olmadığı için yükleme simgesi gösterilmez.

- Tek bir birincil hazırlama eylemi kullanın.

- Sonucun yerel olduğunu belirtin.

- İlke oluşturulduğunu ima etmek için başarı ifadesini yeniden kullanmayın.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Ana sistem varlıklarını uyumlu bir küme olarak sabitleyin

### Örnek, belgelenmiş bir anlık görüntüdür; en yeni sürüm olduğuna dair bir vaat değildir

İncelenen kullanım sayfasında bileşenler 10.7.0 ve CSS 5.1.4 olarak sunuluyor; arama dizini anlık görüntülerinde daha sonraki sürümlerden zaten söz ediliyor. Örnek, doğrudan incelenen bu ikiliyi bilerek birlikte tutuyor. Üretimde kullanırken tek bir sürüm seçin ve uyumlu CSS, yazı tipleri ve bileşen davranışını doğrulayın.

Tarih alanları özel öğelerdir. Yöntem çağrılarından önce tanımlarının yüklenmesini bekleyin, dinleyicileri duetChange olayına ekleyin ve yerel change olayını varsaymak yerine belgelenmiş yükü okuyun. Aynı sayfada ana sistemin CDN modülünü bağımsız tarih seçiciyle birlikte kullanmayın: ikisi de aynı etiketi tanımlar.

Destekleyici belirtimi okuyun

## Duet tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Yerel date alanları ve doğrulanmış Duet varsayılan tema değerleriyle çevrimdışı HTML yorumu sunar; Duet takvim çalışma zamanı değildir.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Duet travel period interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f7fa;color:#082a4d;font:16px/1.5 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:36px 28px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}h1{font-size:36px;line-height:1.2;font-weight:600;margin:0 0 20px}p{margin:0 0 20px}.hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-bottom:28px}.art{height:170px;position:relative;overflow:hidden;border-radius:50%;background:#c6e1ee}.sun{position:absolute;top:25px;right:60px;width:36px;height:36px;border-radius:50%;background:white}.hill{position:absolute;background:#0077b3;width:210px;height:170px;bottom:-95px;left:-10px;transform:rotate(25deg);border-radius:24px}.hill.two{left:135px;background:#00619b;bottom:-110px;transform:rotate(-25deg)}.road{position:absolute;width:150px;height:200px;border:12px solid white;border-radius:50%;top:65px;left:95px;transform:rotate(25deg)}.card{background:white;border-radius:4px;padding:28px;box-shadow:0 2px 8px #082a4d0d;display:grid;grid-template-columns:1fr 230px;gap:28px}h2{font-size:24px;line-height:1.3;margin:0 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-weight:600;margin-bottom:8px}input{width:100%;max-width:100%;min-width:0;border:1px solid #909599;border-radius:4px;font:inherit;color:inherit;padding:12px;background:white}input[aria-invalid=true]{border-color:#d61c52}button{background:#0077b3;color:white;border:0;border-radius:20rem;padding:12px 36px;font:600 16px/1.5 system-ui;cursor:pointer}button:hover{background:#004b81}button:focus-visible,input:focus-visible{outline:3px solid #082a4d;outline-offset:3px}.error{font-size:14px;color:#d61c52;min-height:24px;margin:8px 0 20px}.calendar{background:#f0f7fa;border-radius:4px;padding:20px}.calendar strong{display:block;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}.grid span{padding:3px 0}.grid .in-range{background:#c6e1ee}.grid .endpoint{background:#0077b3;color:white;border-radius:50%}.caption{font-size:12px;margin:12px 0 0}.result{margin-top:20px;background:#e4f1f7;padding:20px;border-radius:4px}.result:empty{display:none}.boundary{font-size:12px;margin-top:28px}.hint{font-size:14px}@media(max-width:650px){main{padding:24px 16px}.hero{grid-template-columns:1fr}.art{display:none}h1{font-size:28px}.card{grid-template-columns:1fr;padding:20px}.fields{grid-template-columns:1fr;gap:16px}.calendar{max-width:300px;width:100%}button{width:100%;padding:12px 20px}}
</style><main><div class="hero"><div><div class="eyebrow">Travel period planner</div><h1>Make time for a change of scenery.</h1><p>Choose a departure and return date to explore an inclusive calendar-day count.</p></div><div class="art" aria-hidden="true"><div class="sun"></div><div class="hill"></div><div class="hill two"></div><div class="road"></div></div></div><div class="card"><section><h2>When will you travel?</h2><p class="hint" id="hint">Use dates from 1–30 June 2027. This fixed month is for demonstration.</p><form novalidate><div class="fields"><div><label for="start">Departure</label><input id="start" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-10" required aria-describedby="hint error"></div><div><label for="end">Return</label><input id="end" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-17" required aria-describedby="hint error"></div></div><div class="error" id="error" role="alert"></div><button type="submit">Prepare date range</button></form></section><aside class="calendar"><strong>June 2027</strong><div class="grid" id="calendar" aria-hidden="true"></div><p class="caption" id="range-caption">10–17 June selected</p></aside></div><div class="result" id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Duet tokens with native date fields. The calendar image is a non-interactive range overview. No insurance quote, booking or policy is created.</p></main><script>const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result'),error=document.querySelector('#error');function valid(){return start.validity.valid&&end.validity.valid&&start.value&&end.value&&end.value>=start.value}function draw(){let days=['M','T','W','T','F','S','S'].map(d=>'<span>'+d+'</span>').join('')+'<span></span>';for(let i=1;i<=30;i++){let iso='2027-06-'+String(i).padStart(2,'0'),range=valid()&&iso>=start.value&&iso<=end.value,edge=range&&(iso===start.value||iso===end.value);days+='<span class="'+(edge?'endpoint':range?'in-range':'')+'">'+i+'</span>'}document.querySelector('#calendar').innerHTML=days;document.querySelector('#range-caption').textContent=valid()?start.value+' to '+end.value:'Choose a valid range to highlight it.'}function changed(){result.textContent='';error.textContent='';start.removeAttribute('aria-invalid');end.removeAttribute('aria-invalid');draw()}[start,end].forEach(el=>el.oninput=changed);document.querySelector('form').onsubmit=e=>{e.preventDefault();let bad;if(!start.value||!start.validity.valid){error.textContent='Choose a departure date in June 2027.';bad=start}else if(!end.value||!end.validity.valid){error.textContent='Choose a return date in June 2027.';bad=end}else if(end.value<start.value){error.textContent='Return must be on or after departure.';bad=end}if(bad){bad.setAttribute('aria-invalid','true');bad.focus();result.textContent='';return}const days=(Date.parse(end.value+'T00:00:00Z')-Date.parse(start.value+'T00:00:00Z'))/86400000+1;result.textContent=days+' calendar '+(days===1?'day':'days')+', including departure and return. Local draft: '+start.value+' to '+end.value+'. No policy created.'};draw();</script></html>
```

Kod referansı

- Bu belge, tarayıcının yerel tarih kontrollerini kullanır. Ayrı Duet örneğinde ana sistem tarih seçicisi kullanılır; bu, bağımsız açık kaynaklı tarih seçici paketiyle karıştırılmamalıdır.

### Bir çift ana sistem Date Picker bileşenini doğrulayın

Etiketli iki alan, Haziran ayı için sınırlar, sıralı başlangıç ve bitiş tarihleri, geçersiz seçiciye odaklanma ve kapsayıcı gün sayısı.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

Kod referansı

- Bu örnek, ana sistem CDN'i üzerinden @duetds/components kullanır; @duetds/date-picker 1.x kullanmaz.

- Aynı gün içeren aralıklar, kapsayıcı hesaplamada bir takvim günü sayılır.

- UTC aritmetiği, sayımdaki yaz saati farklarını önler.

## Duet tasarım sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

İncelenen entegrasyon sayfasında açıkça belirtilen sürümleri kullanan eksiksiz ana sistem CDN bileşimi. Herkese açık arama anlık görüntülerinde daha yeni sürümler de yer alıyor; bunun en yeni sürüm olduğunu varsaymak yerine uyumlu bir sürümü sabitleyin. Yazı tipleri burada yeniden dağıtılmıyor.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

### Projeniz İçin Bir İstem

```
İki etiketli tarih seçici, ISO değerleri ve geçerlilik denetimleriyle bir Duet ana sistem tarih aralığı oluşturun. Bitiş noktalarının sırasını ayrı olarak doğrulayın, hatalarda setFocus çağırın ve açıkça birincil olan yerel hazırlama eylemi kullanın. Bağımsız tarih seçici paketini aynı sayfaya eklemeyin.
```

## Duet tasarım sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign başvurusu. Özgün planlayıcı; herhangi bir poliçe, rezervasyon veya teklif oluşturulmaz. Ana sistem Duet ile ayrı açık kaynaklı tarih seçicisinin sözleşmeleri farklıdır.

- Tasarım belirteçleri Tema renkleri, boşluklar ve belirteç durumu.

- Tipografi Ölçek ve ayrı marka yazı tipleri.

- Tarih Seçici ISO değerleri, doğrulama ve yöntemler.

- Button Gönderim tercihi ve değişiklik.

- Bileşenlerin kullanımı Ana sistem CDN'i ve paketleri.

- Bağımsız tarih seçici Ayrı açık kaynaklı dağıtım; buradaki kod hedefi değildir.

## Duet tasarım sistemi İlgili Kaynaklar

### Elastic UI

Doğrulanmış Borealis ölçekleri, yerel tablo ve arama kontrolleri, önem derecesine göre filtreleme, yerel olarak kaydedilen olaylar ve eksiksiz React kaynak koduyla bir Elastic UI günlük gezgini oluşturun.

### Emplifi Soul

Soul’un veri tablosu sözleşmesini altı piksellik boşlukları, katmanlı renk rolleri ve kompakt Inter yazı tipiyle birlikte inceleyin. Toplu seçimi, eksik veri gösterimini ve özet satırlarını karşılaştırın; ardından doğrulanmış özel React paketi giriş noktalarını inceleyin.

### Esri Calcite

Odaklanmış mekânsal araçlar için pratik bir Calcite başvuru kaynağı: anlamsal yüzeyler ve mavi eylemler, kompakt inceleme panelleri, gerçek giriş API’leri ve site incelemesi için eksiksiz bir yerel örnek.


- [Uygulama başvurusu](https://www.duetds.com/components/date-picker/)
- [Kaynak](https://www.duetds.com/tokens/)
- [Kaynak](https://www.duetds.com/typography/)
- [Kaynak](https://www.duetds.com/components/date-picker/)
- [Kaynak](https://www.duetds.com/components/button/)
- [Destekleyici belirtimi okuyun](https://www.duetds.com/using-components/)
- [Destekleyici belirtimi okuyun](https://www.duetds.com/tokens/)
- [Destekleyici belirtimi okuyun](https://www.duetds.com/typography/)
- [Destekleyici belirtimi okuyun](https://www.duetds.com/components/date-picker/)
- [Destekleyici belirtimi okuyun](https://www.duetds.com/components/button/)
- [Kod referansı](https://www.duetds.com/components/date-picker/)
- [Tasarım belirteçleri Tema renkleri, boşluklar ve belirteç durumu.](https://www.duetds.com/tokens/)
- [Tipografi Ölçek ve ayrı marka yazı tipleri.](https://www.duetds.com/typography/)
- [Tarih Seçici ISO değerleri, doğrulama ve yöntemler.](https://www.duetds.com/components/date-picker/)
- [Button Gönderim tercihi ve değişiklik.](https://www.duetds.com/components/button/)
- [Bileşenlerin kullanımı Ana sistem CDN'i ve paketleri.](https://www.duetds.com/using-components/)
- [Bağımsız tarih seçici Ayrı açık kaynaklı dağıtım; buradaki kod hedefi değildir.](https://github.com/duetds/date-picker)