web-dev-qa-db-fra.com

Définir la date pour qu'elle soit initialement vide dans bootstrap-datepicker

J'utilise le bootstrap-datepicker sur mon site. Le datepicker sera utilisé pour définir les filtres de recherche. J'ai besoin que la valeur initiale de l'élément d'entrée datepicker soit vide, afin de ne pas introduire le filtre de date pour les résultats de la recherche. Lorsque l'utilisateur clique sur l'entrée de texte liée à Datepicker, la boîte de dialogue Datepicker doit sélectionner le premier jour du mois suivant.

Problème: Si je devais définir une date initiale (comme indiqué ci-dessous)} _, l'entrée de texte sera renseignée avec la date du jour, ce qui n'est pas ce que je veux. Cependant, si je ne fixe pas la date initiale, le sélecteur de date indiquera les années 1970. Que devrais-je faire?

Similaire à: La démo de jQueryUI Datepicker

Code JS

var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();

Code HTML

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />

Tentative échouée

Datepicker ne s'affiche pas en cliquant sur l'entrée el texte

$(function() {

    var now = new Date();
    var nextMonth = new Date();
    nextMonth.setDate(1);
    nextMonth.setMonth(now.getMonth() + 1);
    var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
    $('#listing_filter_available').val('');  // clear the date filter
    $('#listing_filter_available').click( function() {
        $('#listing_filter_available').val(prettyDate);
        $('#listing_filter_available').datepicker();
    });

});
javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker
12
Nyxynyx

Je viens de rencontrer un cas d'utilisation très similaire. Avec quelques ajustements à bootstrap-datepicker.js, je crois que ça marche. 

Vous devrez modifier le script à deux endroits.

Pour le champ de date, je vérifie si la date (this.date) est définie sur la date de début Unix (par exemple une date vide). Si c'est le cas, quittez et laissez le champ vide.

(ligne: environ 95)

    setValue: function () {
        // EDIT - Don't setValue if date = unix date start
        if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
        // END EDIT

Pour le calendrier déroulant, je vérifie également si la date (this.date) est définie sur la date de début Unix. Si tel est le cas, définissez la date sur aujourd'hui. Je fais cela pour que lorsqu'un utilisateur clique sur le champ de date, il affiche le mois en cours, par opposition à février 1970.

(ligne: environ 144) 

remplir: fonction () {

      //  EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
            var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
      //  original code
            //    var d = new Date(this.viewDate),
      //  END EDIT

Je crois que c'est tout ce que vous devez faire. Je viens d’intégrer cela dans ma solution. Par conséquent, si quelqu'un découvre un problème ou propose de meilleures suggestions, j'aimerais le savoir.

5
Jason Payne

Il y a un moyen beaucoup plus facile de faire cela! Pour définir une valeur 

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

Pour définir une valeur vide

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
9
jshaw.ws

Je travaille avec bootstrap v3.1.1 et 

$('#listing_filter_available').datepicker('setValue', nextMonth);

n'a pas fonctionné pour moi. 

Vous devez utiliser

$('#listing_filter_available').datepicker('setDate', nextMonth);

remplir le contrôle datepicker

2
Muhammad Waqas Iqbal

Cela ne sera pas possible sans l'édition de bootstrap-datepicker.js

la date par défaut vient de valeur = et si vous la laissez vide, elle correspond au 01-01-1970 (date unix).

Même si vous placez une grosse prime sur la question, il y a trop de travail.

Je vous recommande de trouver un autre plugin.

Je ne suis pas sûr de la datePicker de l'interface utilisateur jQuery car il existe une incompatibilité avec Twitter boostrap https://github.com/Twitter/bootstrap/issues/156

2
baptme

J'ai rencontré un problème similaire et cela fonctionne pour moi.

$(".date-picker").datepicker("setDate", "");

Donc maintenant, lorsque ma page est chargée, la valeur par défaut est vide, le champ n'est pas obligatoire, ils n'ont donc pas à choisir de date et mon contrôleur s'en charge, ou ils peuvent choisir une date et le contrôleur s'en charge ainsi que.

2
James Wilson

Pour la dernière version 

$("input[type=date]").datepicker({ defaultViewDate: {} });

Source: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate

2
CodeReaper

Dans les versions récentes de bootstrap, j'utilise Bootstrap V3.3.6 & Boostrap-timepicker V0.5.2, voici ce qui fonctionne pour Nice et simplement:

$('#txtTimepicker').timepicker().val('');

Pour mon cas personnel, je vérifie les conditions dans l'ensemble de valeurs à l'aide de la syntaxe de rasoir MVC afin de faire la distinction entre "ajouter" et "modifier", comme suit:

$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');

Pour que le mien fonctionne à 100% selon les besoins, j'ai explicitement défini la valeur d'entrée et les options suivantes: 

.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})

Pour plus d'options, vérifiez le fichier de code source ou this link

2
EaziLuizi

Si vous ne trouvez pas une telle fonctionnalité, ne modifiez pas les sources. Soyez intelligent. Recherchez la classe CSS 'active' et supprimez-la dynamiquement ou remplacez la règle dans la feuille de style.

Par exemple, remplacez cette règle (utilisez un sélecteur plus puissant pour votre sélecteur de date):

datepicker td.active, .datepicker td.active:hover {
    background-color: #006dcc;
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

ou supprimez dynamiquement cette classe, en utilisant js.

1
John Smith

J'ai eu le même problème, je suis sorti avec cette solution de contournement, j'ai créé une fonction pour récupérer la date:

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

Note: J'essaie de standardiser chaque getter et setter Afin de pouvoir changer le plugin datepicker à l'avenir

1
nrgjack

Essaye celui-là...

http://aymkdn.github.com/Datepicker-for-Bootstrap/

0
user1618273

Celui-ci est mon préféré

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});
0
Hervera