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

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

Problème: Si je devais définir une date initiale (comme illustré ci-dessous)la saisie de texte sera remplie avec la date d'aujourd'hui, qui n'est pas ce que je veux. Cependant, si je ne réglez pas la date initiale, le datepicker montrera des années 1970. Que dois-je faire?

Similaires à: La démo pour 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" />

Échec De La Tentative

Datepicker n'a pas de popup en cliquant sur le texte d'entrée el

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

});

source d'informationauteur Nyxynyx

  1. 5

    Je viens de rencontré un très semblables cas d'utilisation. Avec un couple de réglages de bootstrap-datepicker.js je crois que j'ai eu à travailler.

    Vous aurez besoin de modifier le script en deux endroits.

    Pour le champ de date, je vérifie pour voir si la date (ce.la date de l'Unix date de début de la (.e.g date vide). Si oui, de sortie et de laisser le champ vide.

    (ligne: 95 - env)

        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 la liste déroulante, le calendrier, je suis également vérifier pour voir si la date (ce.la date de l'Unix date de début. Si oui, indiquez la date d'aujourd'hui. Je suis en train de faire cela, de sorte que lorsqu'un utilisateur clique sur le champ de date, il affiche le mois en cours, par opposition à Février 1970.

    (ligne: 144 - env)

    de remplissage: function () {

          // 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. J'ai juste mis en œuvre dans ma solution, donc, si quelqu'un trouve des questions ou des meilleures suggestions, je serais ravi de les entendre.

  2. 7

    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('');
  3. 2

    Il ne va pas être possible sans modification bootstrap-datepicker.js

    la date par défaut venu de la valeur= et si vous le laissez vide, il correspondent à 01-01-1970 (unix date de début).

    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 si sûr sur le jQuery UI datePicker, puisqu'il y a incompatibilité avec twitter bootstrap https://github.com/twitter/bootstrap/issues/156

  4. 2

    Je suis en train de travailler avec bootstrap v3.1.1 et 

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

    ne fonctionne pas pour moi.

    Vous devez utiliser

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

    pour remplir le contrôle datepicker

  5. 2

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

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

    Alors maintenant, quand mon chargement de la page par défaut est vide, le champ n'est pas nécessaire, de sorte qu'ils n'ont pas à choisir une date et mon contrôleur prendra soin de cela, ou ils peuvent choisir une date et le contrôleur va prendre soin d'elle ainsi.

  6. 1

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

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

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

    Note :
    je suis en train de normaliser tous les getter et setter
    afin d'avoir la possibilité de changer le datepicker plugin dans le futur

  7. 1

    Si vous ne pouvez pas trouver ce genre de fonctionnalité, de ne pas modifier les sources. Être intelligent. Regarder pour la classe CSS "active" et de supprimer dynamiquement ou de remplacer la règle dans la feuille de style.

    Par exemple, remplacer cette règle (utilisation plus fort sélecteur pour votre datepicker):

    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 dynamiquement supprimer cette classe, à l'aide de js.

  8. 1

    Dans les versions Récentes de bootstrapje suis en utilisant Bootstrap V3.3.6 & Bootstrap-timepicker V0.5.2, les ouvrages suivants, nice et simplement:

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

    Pour mon cas personnel, je fais une condition de vérifier à l'intérieur de la val a mis en MVC à l'aide de la syntaxe razor pour distinguer entre une "ajouter", "modifier" de la sorte:

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

    À faire mine de travailler à 100%, comme l'exige, j'ai choisi de définir la valeur d'entrée et l'une des 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 cette lien

  9. 1

    Pour la dernière version 

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

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