Comment restreindre le choix des plages de dates dans le Bootstrap Datepicker?

J'ai besoin d'utiliser datepicker qui me donne la possibilité de limiter le choix des dates. Nous avions été à l'aide de jQuery UI qui est utilisé pour le soutenir à l'aide de minDate, maxDate options.

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});

Récemment, nous avons commencé à utiliser Twitter Bootstrap pour nos styles. Et apparemment, Twitter Bootstrap est incompatible avec jQuery UI les styles. J'ai donc essayé d'utiliser l'un de l'amorçage compatible datepickers disponible à http://www.eyecon.ro/bootstrap-datepicker/.

Malheureusement, le plugin n'est pas aussi configurable que jQuery UI datepicker. Quelqu'un peut-il m'aider à restreindre la possibilité de sélection de la plage de dates dans la nouvelle datepicker.

si datepicker de jQuery fonctionne sauf pour les styles, il pourrait être plus facile à faire tourner ces styles que d'ajouter des non-existant de la fonctionnalité d'une autre bibliothèque. Jetez un oeil à la "Thématisation" onglet sur jqueryui.com/demos/datepicker

InformationsquelleAutor Alagappan Ramu | 2012-08-13

91

Le Bootstrap datepicker est capable de régler la date. Mais il n'est pas disponible dans la version initiale/Branche Master. De vérifier la branche 'gamme', il y a (ou tout simplement voir à https://github.com/eternicode/bootstrap-datepicker), vous pouvez le faire simplement avec startDate et endDate.

Exemple:
```
$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});
```
- le lien ne fonctionne pas
- Ici, vous allez - github.com/eternicode/bootstrap-datepicker. Il y a eu quelques changements dans la structure de l'arborescence du référentiel en raison de la réponse de lien n'a pas fonctionné.
- qu'est-ce que ce '-2m' et +2d tout au sujet de
- Juste au cas où.. doit être mois(m) et les jours(d); c'est à dire, une date de validité est de 2 mois avant aujourd'hui par le biais de 2 jours passé aujourd'hui
InformationsquelleAutor Danny

Avec une sélection de plages de dates vous pouvez utiliser quelque chose comme cela. Ma solution empêche la sélection de #from_date plus grand que #to_date et les changements #to_date startDate chaque fois que l'utilisateur sélectionne une nouvelle date dans #from_date boîte:

http://bootply.com/74352

Fichier JS:

var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();

ToEndDate.setDate(ToEndDate.getDate()+365);

$('.from_date').datepicker({

    weekStart: 1,
    startDate: '01/01/2012',
    endDate: FromEndDate, 
    autoclose: true
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
    }); 
$('.to_date')
    .datepicker({

        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
    });

HTML:

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text">
<input class="to_date" placeholder="Select end date" contenteditable="false" type="text"

Et n'oubliez pas d'inclure bootstrap datepicker.js et .les fichiers css aswell.

InformationsquelleAutor user2586273

L'exemple ci-dessus peut être simplifier un peu. En outre, vous pouvez mettre jour manuellement à partir du clavier au lieu de le sélectionner via datepicker seulement. Lorsque la compensation de la valeur que vous avez besoin pour traiter aussi "sur clearDate' des mesures pour éliminer date de début/date de fin frontière:

Fichier JS:

$(".from_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
    $('.to_date').datepicker('setStartDate', null);
});

$(".to_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var endDate = new Date(selected.date.valueOf());
    $('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
    $('.from_date').datepicker('setEndDate', null);
});

HTML:

<input class="from_date" placeholder="Select start date" type="text" name="from_date">
<input class="to_date" placeholder="Select end date" type="text" name="to_date">

Il fonctionne!!! Il suffit de noter que l' .valueOf() ne fonctionne pas pour moi, parce que datepicker vérifier une date dans le setStartDate.

InformationsquelleAutor Marek

La plupart des réponses et les explications ne sont pas d'expliquer ce qu'est la validité d'une chaîne de endDate ou startDate.
Danny nous a donné deux exemple utile.

$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});

Mais pourquoi?jetons un coup d'oeil au code source à la bootstrap-datetimepicker.js.
Il y a quelques code commencent ligne 1343 nous dire comment cela fonctionne.

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) {
            var part_re = /([-+]\d+)([dmwy])/,
                parts = date.match(/([-+]\d+)([dmwy])/g),
                part, dir;
            date = new Date();
            for (var i = 0; i < parts.length; i++) {
                part = part_re.exec(parts[i]);
                dir = parseInt(part[1]);
                switch (part[2]) {
                    case 'd':
                        date.setUTCDate(date.getUTCDate() + dir);
                        break;
                    case 'm':
                        date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir);
                        break;
                    case 'w':
                        date.setUTCDate(date.getUTCDate() + dir * 7);
                        break;
                    case 'y':
                        date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir);
                        break;
                }
            }
            return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0);
        }

Il y a quatre sortes d'expressions.

w signifie semaine
m moyens mois
y ans signifie
d signifie jour

Oeil à l'expression régulière ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$.
Vous pouvez faire plus que ces -0d ou +1m.

Essayer plus difficile comme startDate:'+1y,-2m,+0d,-1w'.Et le séparateur , pourrait être l'un des [\f\n\r\t\v,]

C'est le droit et la réponse parfaite. Accepté réponse aurait réglé interlocuteur du problème, mais en lui donnant plus de description sur la solution pour ajouter de la valeur en elle.

InformationsquelleAutor FavorMylikes

2

Une autre possibilité est d'utiliser les options avec data attributs, comme ceci(date minimum 1 semaine avant):
```
<input class='datepicker' data-date-start-date="-1w">
```
Plus d'infos: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

InformationsquelleAutor overallduka

je suis à l'aide de la v3.1.3 et j'ai dû utiliser data('DateTimePicker') comme ce

var fromE = $( "#" + fromInput );
var toE = $( "#" + toInput );
$('.form-datepicker').datetimepicker(dtOpts);

$('.form-datepicker').on('change', function(e){
   var isTo = $(this).attr('name') === 'to';

   $( "#" + ( isTo ? fromInput : toInput  ) )
      .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY'))
});

InformationsquelleAutor bresleveloper

Vous devez vous connecter pour publier un commentaire.