Fancybox用戶界面日期選擇器不顯示

我想包括datecicker-ui在fancybox但datepicker不顯示在模式。我更改z-index在datepicker-ui上更大。Fancybox用戶界面日期選擇器不顯示

<div class="col-md-6"> 
       <label style="color:#003580;">Дата на настаняване:</label> 
       <input type="text" id="modal-datepicker1" readonly/> 
      </div> 
      <div class="col-md-6"> 
       <label style="color:#003580;">Дата на напускане:</label> 
       <input type="text" id="modal-datepicker2" readonly/>

這是模式中的html他是白色顯示：無;

$('#btnForm').click(function() { 
     $.fancybox({ 
      autoScale: true, 
      content: $("#divForm").html(), 
      openEffect : 'none', 
      closeEffect : 'none', 
      afterLoad: function() { 
       $("#modal-datepicker1").datepicker({ 
        dateFormat: 'yy-mm-dd' 
       }); 
       $("#modal-datepicker2").datepicker({ 
        dateFormat: 'yy-mm-dd' 
       }); 
          } 

     }); 

    });

Datepickers在DOM樹中，但他們沒有顯示。我能做些什麼？請任何想法。

在此先感謝。

來源

2017-05-11 Darina Andreeva

歡迎來到Stack Overflow。請檢查您的控制檯是否有任何警報或錯誤。請檢查jQuery UI是否正確加載。 – Twisty

另外，他們爲什麼都是「只讀」？ – Twisty

叉形從@Janis的CodePen，因爲它沒有完全工作。

http://codepen.io/anon/pen/vmRRGL

HTML

<p>Date: <br /> 
    <input type="text" id="modal-datepicker1" /> 
</p> 
<p>Date readonly: <br /> 
    <input type="text" id="modal-datepicker1" readonly /> 
</p>

的JavaScript

$(function() { 
    $("#btnForm").click(function() { 
    $.fancybox.open({ 
     src: "#divForm", 
     type: "inline", 
     touch: false, 
     autoFocus: false, 
     afterLoad: function() { 
     $("#divForm input").datepicker({ 
      dateFormat: "yy-mm-dd" 
     }); 
     } 
    }); 
    }); 
});

由於input具有readonly屬性，如果用戶選擇的日期，它canot被寫入場。我建議不要使用readonly。如果你想阻止用戶輸入內容，除了通過日期選擇器，還有一種方法可以做到這一點。

來源

2017-05-11 17:34:00 Twisty

嗨，我評論了我的所有代碼，並把你的決定，但仍然無法正常工作。日期選擇器在那裏但仍未顯示。只顯示它的圖標。我在控制檯中沒有任何錯誤 –

有趣的是，你看到了什麼圖標？ Datepicker UI默認不顯示圖標，我在代碼中看不到您要添加圖標。也許你的網頁上有多個日期選擇腳本？ – Janis

是的，我的項目中有兩個日期選擇器。他們完美地工作。當類有hasdatepicker時顯示圖標。當datepicker在頁面中初始化時。也許這是問題。當我想在fancybox中加載日期選擇器時。我會檢查它的多個日期選擇器。 –

我做了一個快速演示，不受readonly屬性工作正常 -

<p>Date: <br /> 
    <input type="text" id="modal-datepicker1" /> 
    </p> 
    <p> 
    Date readonly: <br /> 
    <input type="text" id="modal-datepicker1" readonly /> 
    </p>

http://codepen.io/anon/pen/rmdYvg

來源

2017-05-11 15:45:25 Janis

是的，我看到，但在我的項目不工作，也許有些事。東西阻礙。一些API或風格可能，我不知道。感謝您的幫助。 –

我找到了一些東西，想告訴你。

<div class="col-md-6"> 
      <label style="color:#003580;">Дата на настаняване:</label><br> 
      <input type="date" id="modal-datepicker-date-from" style="border: 1px solid #ddd;" /> 
     </div> 
     <div class="col-md-6"> 
      <label style="color:#003580;">Дата на напускане:</label><br> 
      <input type="date" id="modal-datepicker-date-to" style="border: 1px solid #ddd;" > 
     </div> 









    $("a.fancybox").click(function() { 
     $.fancybox({ 
      autoScale: true, 
      content: $("#divForm").html() 
     }); 

      $('#modal-datepicker-date-from').on('click',function(){ 
       if (!Modernizr.inputtypes.date) { 
       $('input[type=date]').datepicker({ 
        dateFormat: 'yy-mm-dd', 
        setDate: new Date(), 
       }); 

      } 
      }); 


    });

簡單而好。簡單而好。我希望這會對某人有所幫助。

來源

2017-05-18 07:29:04

Fancybox用戶界面日期選擇器不顯示

回答

相關問題