ISO tarih değerleri, açık aralık doğrulaması, bileşen odaklama yöntemleri ve ayrı açık kaynak tarih seçici sınırı içeren tarih aralığı iş akışıyla Duet’in LocalTapiola renk ve boşluk ölçeklerini inceleyin.
Yerel tarih girişlerini ve doğrulanmış Duet varsayılan tema değerlerini kullanan çevrimdışı HTML yorumu; Duet takvim çalışma zamanı değildir. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
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.
Eksik, hatalı biçimlendirilmiş veya sınırların dışındaki uç tarihleri reddedin.
Gidiş tarihinden önce olan dönüş tarihini reddedin.
Düzeltme gereken alana odağı taşıyın.
Dahilî tarih aralığını yalnızca her iki denetim de başarılı olduğunda hazırlayın.
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.
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.
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.
html
<!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>
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ı.
html
<!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>
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.
04
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.
html
<!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
Ajan İstemi
İ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.
05
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.
