Le sélecteur de date s'ouvre automatiquement

J'ai un code javascript à l'aide de qui je veux accomplir ce qui suit . Je veux que lorsque je clique sur le bouton, un formulaire s'affiche mais datepicker de la date du choix de l'option de ne pas apparaître automatiquement (mais dans mon cas, il s'ouvre) . Donc, en d'autres termes, j'baguette de désactiver la autoopen . Voici le script

<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>

source d'informationauteur

jquery

17

La raison pour laquelle le datepicker montre immédiatement, c'est parce que le input la datapicker est chargé sur a focus par défaut .. voir ici - c'est parce que c'est le premier input sur un formulaire .... si vous ajoutez un autre input avant la première de ses beaux - > http://jsfiddle.net/JXtBM/1/

Un moyen de contourner ce problème serait d'utiliser un bouton pour déclencher l'ouverture de la datepicker :
```
showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
```
Exemple de travail ici

Si vous ne voulez pas l'accent sur le datepicker, vous pouvez simplement mettre une autre entrée avant eux et de le rendre "invisible"

<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>

Dans ce cas, l'entrée a la hauteur 0px, et est hors de l'écran, afin de ne pas s'afficher. Gardez à l'esprit que les dates doivent être toujours repris, permettant à l'utilisateur d'écrire est un risque parce que les formats de date, séparateurs, etc...

2

Comme ManseUK dit, c'est parce que la boîte de dialogue méthode sélectionne automatiquement le premier "tabbable" élément à l'intérieur de l'élément parent. Il est codé en dur pour ce faire, comme indiqué dans une autre question.

Une solution de contournement (qui, je pense, un peu bizarre, mais qui fonctionne), serait de créer un onglet à un autre élément au-dessus de l'intrants, comme suit:
```
<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>
```

définir un onglet à un autre élément d'aide à filtrer la question comme indiqué ci-dessous:

**<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">

Essayez de mettre le datepicker de l'initialisation dans le document de prêt de rappel, comme ceci:

$(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();
                            }

 });
});

et cliquez sur la fonction ne contient que:

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

Je ne suis pas 100% sûr que cela va fonctionner, mais au moins est la façon correcte de faire l'initialisation (si vous l'avez déjà sur la page, initialiser sur prêts)

Vous pouvez résoudre ce problème en supprimant le focus après le $("#commander-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();
        });
    });

0

Le déclenchement de "brouiller" après la création résout le problème pour moi.
Je vois cela comme un workarround. Je ne veux pas ajouter un bouton pour ouvrir le calendrier, ni l'ajout d'entrées à mon document.
```
$('[data-datepicker="datepicker"]').datepicker().trigger('blur');
```
0

Meilleure option est de définir le "autofocus" attribut sur un autre élément. Lorsque jquery ouvre la boîte de dialogue, il va chercher l'élément avec l'attribut autofocus et définir le focus. Si aucun n'est trouvé, alors le focus est le premier élément visible.<input type="text" id="txtDescription" autofocus />
0

J'ai résolu ce problème en ajoutant à cela comme un premier champ de mon formulaire.

Vous devez vous connecter pour publier un commentaire.