Il selettore di data si apre automaticamente

Ho un codice javascript con il quale voglio ottenere quanto segue. Voglio che quando clicco sul pulsante compaia un modulo ma la data di datepicker sceglie l'opzione di non apparire automaticamente (ma nel mio caso si apre). Quindi, in altre parole, disabilito quella apertura automatica. Ecco lo scriptIl selettore di data si apre automaticamente

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"  type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"  type="text/javascript"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#button").click(function() { 
       var dates2 = $("#datePicker3,#datePicker4").datepicker({ 
        autoOpen: false, 
        minDate: 0, 
        changeMonth: true, 
        numberOfMonths: 1, 
        onSelect: function (selectedDate) { 
         var option = this.id == "datePicker3" ? "minDate" : "maxDate", 
          instance = $(this).data("datepicker"), 
          date = $.datepicker.parseDate(
          instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
         dates2.not(this).datepicker("option", option, date); 
         calculate_total_price(); 
        } 

       }); /// 
       $("#order-popup").dialog(); 
       $("#order-popup").show(); 
      }); 
     }); 
    </script> 
    <input type="button" value="addclass" id="button"> 
    <div id="order-popup" style="display:none;" class="popup-content already-ordered"> 
     <input type="text" id="datePicker3" name="datepickerFrom" value=""> 
     <br/> 
     <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px"> 
     </form> 
    </div> 
</body>

fonte

2012-03-17 Anonymous

Qualsiasi utilizzo? http://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog –

Vorrei ridisegnare il calendario e rendere il campo in sola lettura e solo inviare i dati se si fa clic sul pulsante per aprire il calendar –

La ragione per la datepicker mostra subito perché il input il datapicker è caricato sopra ha focus di default .. see here - questo è perché la sua la prima input su una forma .... se si aggiunge un altro input prima che il primo la sua fine ->http://jsfiddle.net/JXtBM/1/

un modo per aggirare questo problema sarebbe quella di utilizzare un pulsante per attivare l'apertura del datepicker:

showOn: "button", 
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif", 
buttonImageOnly: true,

Working example here

fonte

2012-03-17 12:20:38 ManseUK

Come rimuoviamo l'attenzione? –

@ user1204905 perché vorresti? stai andando a me un utente che fa clic sull'input - che aprirà il DatePicker! – ManseUK

hai detto "il datapicker è caricato su ha focus" e io voglio esattamente il contrario. –

provare a mettere l'inizializzazione DatePicker nel documento richiamata pronti, in questo modo:

$(document).ready(function(){ 

var dates2 = $("#datePicker3,#datePicker4").datepicker({ 
          autoOpen:false, 
          minDate:0, 
          changeMonth: true, 
          numberOfMonths: 1, 
          onSelect: function(selectedDate) { 
           var option = this.id == "datePicker3" ? "minDate" : "maxDate", 
           instance = $(this).data("datepicker"), 
           date = $.datepicker.parseDate(
            instance.settings.dateFormat || 
            $.datepicker._defaults.dateFormat, 
            selectedDate, instance.settings); 
           dates2.not(this).datepicker("option", option, date); 
           calculate_total_price(); 
          } 

}); 
});

e la funzione di scatto contiene solo:

$("#order-popup").dialog(); 
$("#order-popup").show();

io non sono Certo al 100% funzionerà, ma almeno è il modo corretto di inizializzare (se lo hai già nella pagina, inizializza pronto)

fonte

2012-03-17 12:19:34

this didnt work –

Come ha detto ManseUK, è perché il metodo di dialogo seleziona automaticamente il primo elemento "tabbable" all'interno dell'elemento genitore. È codificato per farlo, come mostrato in another question.

Una soluzione (che penso sembra strano, ma funziona), potrebbe essere quella di impostare un indice di scheda ad un altro elemento sopra gli ingressi, in questo modo:

<div id="order-popup" style="display:none;" class="popup-content already-ordered"> 
    <p tabindex="1">Choose Dates:</p> 
    <input type="text" id="datePicker3" name="datepickerFrom" value="" /> 
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px" /> 
</div>

fonte

2012-03-17 12:47:30 Anthony

ho appena inserito il tag p e appena nascosto. Tutto ha funzionato bene grazie. –

Fai attenzione a come lo nascondi. Nel mio test, impostandolo su display: nessuno lo fa saltare e quindi l'input è nuovamente a fuoco. – Anthony

Ad essere sinceri non ho capito cosa intendevi, ma nascondere il tag p in bianco ha funzionato bene. C'è qualche problema che potrebbe accadere in questa situazione? –

Se non si desidera che l'attenzione su il datePicker, si può semplicemente mettere un altro ingresso davanti a loro e renderlo "invisibile"

<input type="button" value="addclass" id="button"> 
<div id="order-popup" style="display:none;" class="popup-content already-ordered"> 
    <input style="height:0px; top:-1000px; position:absolute" type="text" value=""> 
    <input type="text" id="datePicker3" name="datepickerFrom" value=""> 
    <br/> 
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px"> 
    </form> 
</div>

In questo caso l'ingresso ha altezza 0px, ed è fuori dello schermo, in modo da non vedere. Tieni presente che le date devono essere sempre selezionate, consentendo all'utente di scrivere un rischio a causa di formati data, separatori, ecc ...

fonte

2012-03-17 12:52:32

Excellet, dal momento che voglio che DatePicker funzioni normalmente (non mi piacciono i pulsanti extra). –

impostare un indice di tabulazione su un altro elemento per risolvere il problema come riportato di seguito:

**<label tabindex="1">From Date:</label>** 
<input type="text" name="from_date" id="from_date" readonly="readonly" class="hasDatepicker"> 

<label>To Date</label> 
<input type="text" name="to_date" id="to_date" readonly="readonly" class="hasDatepicker">

fonte

2013-01-04 09:40:20

È possibile risolvere questo problema rimuovendo lo stato attivo dopo $ ("# order-popup"). Show();

$(document).ready(function() { 
     $("#button").click(function() { 
      var dates2 = $("#datePicker3,#datePicker4").datepicker({ 
       autoOpen: false, 
       minDate: 0, 
       changeMonth: true, 
       numberOfMonths: 1, 
       onSelect: function (selectedDate) { 
        var option = this.id == "datePicker3" ? "minDate" : "maxDate", 
         instance = $(this).data("datepicker"), 
         date = $.datepicker.parseDate(
         instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
        dates2.not(this).datepicker("option", option, date); 
        calculate_total_price(); 
       } 

      }); /// 
      $("#order-popup").dialog(); 
      $("#order-popup").show(); 
      $('#datePicker3, #datePicker4').blur(); 
     }); 
    });

fonte

2013-01-17 19:45:12

Attivare "sfocatura" dopo la creazione risolve il problema per me. Lo vedo come un workarround. Non voglio aggiungere un pulsante per aprire il calendario né aggiungere input aggiuntivi al mio documento.

$('[data-datepicker="datepicker"]').datepicker().trigger('blur');

fonte

2015-04-08 10:33:43 Robin

La migliore opzione è impostare l'attributo "autofocus" su un altro elemento. Quando jquery apre la finestra di dialogo, cerca l'elemento con l'attributo autofocus e imposta lo stato attivo su di esso. Se non viene trovato nessuno, la messa a fuoco è impostata sul primo elemento visibile.<input type="text" id="txtDescription" autofocus />

fonte

2018-01-09 18:52:29 Kevbo

Il selettore di data si apre automaticamente

risposta

Problemi correlati