web-dev-qa-db-fra.com

JQuery Datepicker - pas de date par défaut

Je souhaite supprimer la date par défaut dans mon JQuery Datepicker.

J'essaye le code suivant:

$(this).datepicker({defaultDate: ''});

Mais cela ne semble pas fonctionner. La date du jour est toujours sélectionnée par défaut.

jqueryjquery-uidatepicker
22
user352985

J'ai contourné le problème en utilisant un altField caché:

<div id="DatePicker"></div>
<input type="hidden" value="" name="Date" id="Date" />

et le script suivant:

<script>
    $(function () {

        $('#DatePicker').datepicker({
            altField: '#Date', // ID of the hidden field
            altFormat: 'dd/mm/yy'
        });

        // Remove the style for the default selected day (today)
        $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day');

        // Reset the current selected day
        $('#Date').val('');
    });
</script>

Ensuite, j'ai utilisé le champ masqué #Date dans mes routines de validation.

9
Lee Gunn

Aucune des réponses au moment de la rédaction de cet article ne fonctionnait vraiment pour moi, alors voici ma solution pavée à partir de deux réponses (pour un sélecteur de date en ligne).

    $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though
    $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight
8
J. Polfer

Sur la base des réponses affichées ici, j'ai réussi à faire quelque chose qui a fonctionné. Pour mes besoins, j'avais un calendrier toujours visible. Si vous en avez besoin pour un calendrier contextuel, vous devriez pouvoir utiliser le gestionnaire onSelect existant pour effectuer quelque chose de similaire la première fois qu'il est ouvert .

$("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active");

Heureusement, c’est aussi simple que cela avec la dernière version de jQuery UI (1.10.2 au moment de la rédaction de cet article). Il ne semble pas interférer avec le bon fonctionnement du widget. Le seul inconvénient est que l'utilisation de getDate getter donne ce qui aurait normalement été la date sélectionnée par défaut.

Pour les besoins de mon code, cela est acceptable car mes utilisateurs ne peuvent pas continuer (ils n'ont même pas le bouton Continuer) tant qu'ils n'ont pas cliqué sur une date valide dans le sélecteur. Si ce n'est pas le cas pour vous, quelque chose comme la réponse de Florian Peschka devrait vous procurer ce dont vous avez besoin.

4
Chris Hall

Pour ouvrir la boîte de dialogue Datepicker, celle-ci doit être ouverte dans un mois ou un an. Je veux dire, vous voulez afficher cette boîte de dialogue et être vide? ... 

Je pense que si vous ne voulez pas dépasser une date par défaut, le mieux que vous puissiez faire est d'obtenir la date du jour avec:

$(document).ready(function() {
  $('#datepicker').datepicker();
});

En passant cela échouera, à cause de defaultDate, non nul mais vide

$(this).datepicker({defaultDate: ''});

Ceci est quelque chose qui fera ce que prévu dans le code précédent

$(this).datepicker({defaultDate: null});

mais son comportement est identique à celui du premier bloc de code de cette réponse.

3
Garis M Suero

J'ai le même problème en utilisant inline datepicker . Le plugin ajoute à la cellule d'aujourd'hui/td la classe .ui-datepicker-current-day et .ui-state-active. Ma solution consiste à utiliser une classe personnalisée telle que .ui-datepicker-selected-day et à implémenter beforeShowDay pour gérer vous-même l'affichage du jour sélectionné. Quelque chose comme ca:

$("datepicker").datepicker({
  beforeShowDay: function(date) {
  var dateIso = $.datepicker.formatDate("yy-mm-dd", date);
  var dateSelected = $("input").val();
  var classDate = "";
  if(dateSelected === dateIso){
    return [false,"ui-datepicker-selected-day"];
  }else{
    return [true];
  }
}

Exemple de css à mettre en "surbrillance" la cellule:

.ui-widget-content .ui-datepicker-selected-day .ui-state-active{
  background-color: red;
}
+ disable some css from the plugin
2
Remy Mellet

J'ai utilisé $('.datefield').val('') pour afficher un blanc au lieu d'afficher la date par défaut.

1
Niraj

Je sais que c'est une vieille question et je l'ai trouvée parce que j'avais les mêmes exigences. n’affiche pas de date dans la zone de saisie, permet à l’utilisateur de sélectionner une date dans le sélecteur de date.

Le balisage (MVC) 

<div class="leftContent">
     @Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})
</div>

Sortie HTML: 

<div class="leftContent">
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn">
</div>

Script (dans le document prêt): 

$('.DateShipOn').datepicker({
    constrainInput: true,
    display: true,
    border: true,
    background: true,
    maxDate: "+1m",
    minDate: new Date('@minDate')
});

$('.DateShipOn').datepicker("setDate", new Date());

L'effet du code ci-dessus est que la zone de saisie a la valeur de la variable 'minDate' affichée et que lorsque vous cliquez sur l'entrée, le sélecteur de date descend et la 'minDate' est sélectionnée par défaut.

Remarque: nous n'autorisons pas la saisie manuelle, c'est la raison de l'attribut 'readonly'.

Résolution:

Tout ce que j'avais à faire, dans mon cas, était de commenter/supprimer la ligne:

$('.DateShipOn').datepicker("setDate", new Date());

Le résultat:

L'effet est celui affiché.

  • Il n'y a pas de date par défaut dans l'entrée (zone de texte)
  • L'utilisateur ne peut pas saisir l'entrée (zone de texte)
  • Le sélecteur de date défile sans date par défaut
  • MinDate empêche les dates antérieures à la valeur minDate d'être sélectionnées
  • MaxDate empêche la sélection de dates après la valeur maxDate

Remarque: Pour mon besoin, le '+ 1m' pour maxDate limite la sélection de date aux 30 jours à compter de la valeur minDate.

J'espère que cela aide quelqu'un.

1
Ed DeGagne

Travaille pour moi:

$(document).ready(function() {
    $("#datepicker .ui-state-active").removeClass("ui-state-active");
    $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight");
    $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today");
});
0
Fernando Candido

J'ai eu un problème similaire, mais avec un comportement spécifique.

(En remarque, je pense que le comportement attendu devrait être de commencer par la date actuelle dans le calendrier, mais pas le sélectionner.)

Mon implémentation incluait un calendrier en ligne avec une entrée masquée altField. Ce que j'ai fait est de supprimer l'option altField et d'ajouter une fonction onSelect qui l'a mise à jour. De cette façon, la date du jour semble toujours sélectionnée, mais le champ masqué qui représente la valeur réelle reste vide.

0
uv.

Ma solution implique de surcharger l'ajout de jQuery afin que nous puissions supprimer les éléments chaque fois que le code HTML est régénéré et ajouté au div. Cela corrige le clignotement de la date par défaut lors du changement de mois et efface également le survol.

(function($) {
    var origAppend = $.fn.append;

    $.fn.append = function () {
        return origAppend.apply(this, arguments).trigger("append");
    };
})(jQuery);

var datePickerDiv = $("#date-picker");
datePickerDiv.bind("append", function() {
  $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over");
  $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover");
});

datePickerDiv.datepicker();
0
billmccord