Çok Tarihli Seçici Böcek?

Question

Sitemde kullanıcıların birden çok eşzamanlı olmayan tarih seçmesine olanak tanıyan bir tarih seçicisi eklemeye çalışıyorum. Multidatespicker istediğimi yapıyor gibi görünüyor, ama bir hata keşfettiğimi düşündüğüm bir noktaya, özellikle de here teyit edilen AltField ile. Hata alt alanın değerlerini göstermeyi engelliyor gibi görünüyor. Multidatespicker demo'u ziyaret ederseniz ve alt alanı incelerseniz, boş görünürken değerlerin kodda gösterildiğini görürsünüz.

Bu benim için sunduğu sorun, App/DB'mden bir kaydı döndürürken daha önce seçili tarihleri ​​değiştiremem. Altfield'in değerini veritabanı deposu için Rails Uygulamasına geri gönderirken sadece kodda gösterilen gizli değerleri alırım.

Bu değerleri doğru şekilde gösterebilmek için alt alanı alabilir ve bunları tarih seçici aracılığıyla düzenlememe izin verebilirsem, o zaman uygulamanızın arka ucunda değişiklik yapmam gerekir.

Yukarıdaki github bağlantısında önerilen düzeltmenin, bu sorunu çözmediğine dikkat edin; yalnızca "dateVar" öğesinde seçicideki oluşturulma tarihlerinin seçime izin verdiğine dikkat edin ... altField'daki değerleri göstermek için hiçbir şey yapmaz.

Bunu kullanan ve aynı problemi olan ve çözmüş olan var mı?

Bunu nasıl düzelteceğini bilen var mı?

VEYA

kimse Heyecan Bootstrap kullanarak Rails 3 App ile güzel çalışacak iyi bir alternatif önerebilir. Eşzamanlı olmayan birden çok tarih seçebilmem çok önemli. Oldukça kapsamlı arama yaptım ama MultiDatesPicker bulabileceğim tek seçeneklerden biri gibi görünüyor.

Answer 1

Sorun şu ki, #altField öğesinin dinlemediği Multidatespicker bu yüzden tarih eklemek/kaldırmak için kendi dinleyicimizi oluşturmamız gerekiyor. Buradaki değer, hidden veya readonly girişlerine değer eklemek ve tarihleri ​​bir diğerine eklemek/kaldırmaktır. Bu, müşterinin #altField'a tarih eklemesini ve eklentinin üzerine yazılmasını önler.

HTML

<input type="text" id="date"> 

<button type="button" id="addDate">Add dates</button> 

<button type="button" id="removeDate">Remove dates</button> 

<div class="ui-state-error" id="error"></div> 
<br /> 
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31"> 

JAVASCRIPT

Ve javascript ile biz sadece hayal gücünüzü tahmin edebilirsiniz :)

var dates = $('#altField').val().split(','); 


    $('#datepicker').multiDatesPicker({ 
    dateFormat: "yy-mm-dd", 
    addDates: dates, 
    altField: '#altField' 
    }); 

    $('#addDate, #removeDate').on('click', function() { 
     try { 
      var $date = $('#date'); 
      var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates'; 

      $('#datepicker').multiDatesPicker(addOrRem, $date.val()); 
      $date.val(''); 
     } catch (e) { 
      var $error = $('#error'); 
      $error.html(e).slideDown(); 
      setTimeout(function() { 
       $error.slideUp(); 
      }, 2000); 

     } 
    }); 

keyUp veya şey üzerinde olabilir (bir düğme ile tarih ekleyin

jsFiddle

Answer 2

MultiDatesPicker kaynağını taradım. #altfield'den tarihi ayarlayan herhangi bir yöntem bulamadım. Yani eksik olduğu bir hata değil. Ayrıca, önceden seçilmiş tarihler ve alt alan arasındaki farkı anlamıyorum.

Sana preselect bir kombinasyonu ve altfield ile istediğini yapabileceğini düşünüyorum:

html

<div id="with-altField"></div> 
    <input type="text" id="altField" value="08/22/2013,08/21/2013"> 
    </div> 

javascript javascript yüklemek nb

//first read the values of the #altfield var dates = $('#altField').val().split(','); //second set your multiDatesPicker with the dates of step 1 and an altfield $('#with-altField').multiDatesPicker({ dateFormat: "mm/dd/yy", addDates: dates, altField: '#altField' }); 

belge hazır