web-dev-qa-db-fra.com

Fonction de désactivation du sélecteur de date d'amorçage

J'ai besoin dans mon projet d'une fonctionnalité qui, à mon avis, n'offre toujours pas bootprap datepicker. J'aimerais activer/désactiver un champ datepicker afin qu'un utilisateur ne puisse pas changer sa valeur. Quelque chose comme une fonctionnalité readOnly.

Des idées à ce sujet?

Merci d'avance.

twitter-bootstrapdatepicker
10
Juan Luis

J'ai trouvé une solution, mais simplement en modifiant le code du calendrier d'amorçage. Remplacer la partie this._events pour désactiver l’événement de majoration/désactivation a fonctionné pour moi:

_buildEvents: function(){
        if (this.isInput) { // single input
            this._events = [
                [this.element, {
                    focus: $.proxy(this.show, this),
                    keyup: $.proxy(this.update, this),
                    keydown: $.proxy(this.keydown, this)
                }]
            ];
        }
        else if (this.component && this.hasInput){ // component: input + button
            this._events = [
                // For components that are not readonly, allow keyboard nav
                [this.element.find('input'), {
                    //focus: $.proxy(this.show, this),
                    //keyup: $.proxy(this.update, this),
                    //keydown: $.proxy(this.keydown, this)
                }],
                [this.component, {
                    click: $.proxy(this.show, this)
                }]
            ];
        }
        else if (this.element.is('div')) {  // inline datepicker
            this.isInline = true;
        }
        else {
            this._events = [
                [this.element, {
                    click: $.proxy(this.show, this)
                }]
            ];
        }

        this._secondaryEvents = [
            [this.picker, {
                click: $.proxy(this.click, this)
            }],
            [$(window), {
                resize: $.proxy(this.place, this)
            }],
            [$(document), {
                mousedown: $.proxy(function (e) {
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();
                    }
                }, this)
            }]
        ];
    },
0
Juan Luis
$("#nicIssuedDate").prop('disabled', true);

cela fonctionne pour moi avec Bootstrap Datepicker et Jquery

10
Chinthaka Dinadasa

Vous pouvez faire ce qui suit:

Pour désactiver:

$("#date").datepicker("option", "disabled", true);

et pour permettre:

$("#date").datepicker("option", "disabled", false);

3
Sadiksha Gautam

Faites juste ceci:

$('#idOfYourCalendar').data("DateTimePicker").disable();

documents officiels: https://eonasdan.github.io/bootstrap-datetimepicker/Functions/

2
JAVIER A. RAMÍREZ Z.

Vous pouvez utiliser onRender event de Bootstrap, ce qui désactive ledatepicker.

onRender: Cet événement est déclenché lorsqu'un jour est rendu dans le sélecteur de date. Devrait renvoyer une chaîne. Retournez 'disabled' pour désactiver la sélection du jour.

2
Praveen

Essayez de définir l’option enabledDates sur un tableau contenant uniquement la date à afficher. Définissez également la date à cette date. Toutes les autres dates seront alors désactivées.

enabledDates: ['your_date_to_show'],

Par exemple.

  $('#Date').datetimepicker({
    inline: true,
    viewMode: "days",
    format: "YYYY-MM-DD",
    enabledDates: [fetchDate("Date")],
  })
  .data("DateTimePicker")
  .date(fetchDate("Date"));

  $('#Date').ready(function (){
    $("#Date").data("DateTimePicker").date(fetchDate("Date"));
  });
1
David Black

Utilisez ce code

$("#nicIssuedDate").prop('disabled', true);
0
Abdus Salam Azad

J'ai réussi à obtenir une solution acceptable comme suit:

$(".date").datetimepicker({
                defaultDate: moment(),
                format: 'YYYY-MM-DD'
            }).end().on('keypress paste', function (e) {
                e.preventDefault();
                return false;
            });

J'espère que ça marchera pour toi aussi!

0
Ye Yint