2016-04-11 34 views
0

, ben Materialize datepicker için minimum ve maksimum seçenekleri bulduk başlangıç ​​tarihinden önce bitiş tarihini önlemek, ancak aşağıdaki gibi birbirleri ile bağlantılı olarak kullanılan iki datepickers nasıl ayarlanacağını bilmiyorum:Materialise Datepicker Materialize datepicker için

  1. Kullanıcı bir başlangıç ​​tarihi seçer.
  2. Kullanıcı şimdi bir bitiş tarihi seçmeli, ancak başlangıç ​​tarihinden önce bir tarih seçememelidir.
  3. Kullanıcı ilk bitiş tarihini seçerse, o bitiş tarihinden sonra bir başlangıç ​​tarihi seçememelidir.

Javascript programcısı değilim, bu yüzden nasıl başlayacağınızdan emin değilim. Tahminlerime göre, her bir tarihçinin onSet etkinliğine bazı kodlar koymam gerekecek.

Aynı zamanda zamanlayıcı için de aynısını yapmaya çalışıyorum: http://weareoutman.github.io/clockpicker/jquery.html.

Birisi bu kod veya başka bir çözüm konusunda yardımcı olabilir mi?

+0

Şimdilik, form gönderiminde sunucu tarafı doğrulaması yaptım. Çalışır, ama aklımda olan şey tam olarak değil. –

cevap

1

Sunucu tarafı doğrulaması için çözümlendi. Malzeme tarafında eklenti ile istemci tarafında bunu yapmanın bir yolu yok gibi görünüyor.

0

Aşağıdaki kod, istemci tarafında yapar. - Sadece iki kimlikleri güncellemek emin olun Sen datepickers kullanılmaktadır sayfanıza ekleyebilirsiniz http://codepen.io/amsul/pen/nGckA

var from_$input = $('#input_from').pickadate(), 
    from_picker = from_$input.pickadate('picker') 

var to_$input = $('#input_to').pickadate(), 
    to_picker = to_$input.pickadate('picker') 


// Check if there’s a “from” or “to” date to start with. 
if (from_picker.get('value')) { 
    to_picker.set('min', from_picker.get('select')) 
} 
if (to_picker.get('value')) { 
    from_picker.set('max', to_picker.get('select')) 
} 

// When something is selected, update the “from” and “to” limits. 
from_picker.on('set', function(event) { 
    if (event.select) { 
    to_picker.set('min', from_picker.get('select'))  
    } 
    else if ('clear' in event) { 
    to_picker.set('min', false) 
    } 
}) 
to_picker.on('set', function(event) { 
    if (event.select) { 
    from_picker.set('max', to_picker.get('select')) 
    } 
    else if ('clear' in event) { 
    from_picker.set('max', false) 
    } 
}) 

:

$('.datepicker').pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     closeOnSelect: true, 
     closeOnClear: true, 
     format: 'yyyy-mm-dd', 
     onSet: function (ele) { 
      if(ele.select){ 
        this.close(); 
      } 

      var d1 = $('#startdate').val(); 
      var d2 = $('#enddate').val(); 

      var date1 = new Date(d1); 
      var date2 = new Date(d2); 

      var date1_ms = date1.getTime(); 
      var date2_ms = date2.getTime(); 

      if((date2_ms -date1_ms) <0) 
      { 
       alert('End date cannot be a previous date!'); 
       $('#startdate').val(d2); 

      } 

     } 

     }); 
+1

Teşekkür ederiz! Ben senin çözümünü görüyorum, ama aslında ilk etapta tarih seçemiyorum arıyordum :-) –

1

Materialize Tarih Seçici aşağıdaki çözüm sunar, hangi pickadate.js kullanır (#input_from ve #input_to) örneğinde, başlangıç ​​& bitiş tarih aramalarının kimlikleriyle eşleşecek şekilde.

+0

Kullanıcı tamamen farklı bir şey için teklif beri, kendi cevabını kabul neden emin olmadı. Cevabınız mükemmeldi ve çok daha fazla özel almamı sağladı. – DNorthrup