HTML zamanı giriş alanı minimum ve maksimum nitelikleri Yani Im basit mobil uygulaması oluşturmak için açısal kullanarak birkaç dakika

Question

çalışmayan ve html bir bölümünde ben bu vardır:

<input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/> 

Bu benim gerçekten basit "zaman seçici "ve gerçekten güzel çalışıyor, ben dinamik olarak öğeyi görebildiğiniz gibi bir min ve max verdim ve min ve max zamanın 'saat' kısmı için çalışır ve hatta kaydırma tekerleği menzili dışında kalan saatlerini kaldırır app içinde (tabii ki bir telefonda test edildiğinde) ama bir sebepten dolayı dakikalar için aynı şeyi yapmaz.

İlginç bir şekilde, ng-değiştirme işlevi, dakikalar bakımından aralık dışında bir zaman seçerseniz tetiklenmez; bu nedenle, en fazla "20:30:00" varsa ve zaman "20:31" ng değişimini tetiklemez, ancak "20:30" seçerseniz, tetiklenir.

Bu, en az ve en yüksek değeri bildiği gibi davranıyor, ancak ilk etapta istediğim, saatlerce olduğu gibi, MINUTES yanlış seçilebilir kaydırma tekerleğinden de kaldırılacak.

Lütfen yardım edin, teşekkürler!

Ek Detaylar ...

• dinamik set kere bu biçimdedir: ör "21:30:00"

• DOM yüklendikten önce min ve maks değerlerini ayarlayarak doğru değerlerin kullanılacağından emin olabilirim.

Answer 1

özel kendin bir min ve max belirtebilir ve giriş seçeneğinden değiştirmesini kullanıcıyı sınırlar UI bootstrap Timepicker

kullanıyor şey yazmadan Bunun olacak bulduğum tek yöntemi. Girişi gerçek zamanlı olarak doğrular. Bunlar senin ihtiyaçların gibi görünüyor.

Sitenizden, min ve maks. Geçerliliğini gösteren değiştirdiğim plunkr demo. Tarih formatındaki kontrolör kodunda min ve maks.

HTML

<uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" max="max" min="min" ></uib-timepicker> 

JS HTML5 min ve max için doğrulayıcıları kullanarak

var d = new Date(); 
d.setHours(2); 
d.setMinutes(30); 
$scope.min = d; 

var d2 = new Date(); 
d2.setHours(11); 
d2.setMinutes(0); 
$scope.max = d2;