Plusieurs datepicker à l'aide de Pikaday

Im en utilisant Pikaday comme un datepicker parce que Datepicker de JQuery est d'avoir des conflits avec la librairie Prototype.

Quelques questions ici.

Comment puis-je utiliser pikaday datepicker dans plusieurs zone de texte
Comment format de la date. Précédemment en utilisant JQuery Datepicker, pour changer le format que j'ai seulement besoin d'
ajouter dateFormat:"jj M yy",

Voici un exemple de code

<input type="text" id="datepicker">

<script src="pikaday.js"></script>
<script>

var picker = new Pikaday(
{    
    changeMonth: true,
    changeYear: true,
    field: document.getElementById('datepicker'),
    firstDay: 1,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000,2020]

});

</script>

OriginalL'auteur user1852728 | 2013-01-17

7

Je suppose que vous cherchez un moyen d'avoir pikaday travailler ensemble pour une plage de dates et type de chose et puis de manipuler le dernier en fonction de la date que vous avez sélectionnée dans la première?
...
Je réalise que c'est un peu tard, mais peut-être quelqu'un d'autre est intéressé par une réponse:

Pikaday n'offre rien en interne ici, mais j'ai été en mesure de contourner ce problème en détruisant l'instance et de le créer encore une fois quand un jour a été repris dans le "de" sélecteur.

HTML:
```
From: <input type="text" name="from" id="from">
To: <span id="toField"><input type="text" name="to" id="to"></span>
```
Javascript:
```
function dateRange() { //destroy to field and init with new param
 var picker = new Pikaday({ field: document.getElementById("from") });
 if(picker.toString()) {
  $("#to").pikaday('destroy');
  $("#to").remove();
  $("#toField").html('<input type="text" name="to" id="to">');

  $("#to").pikaday({ //should have the same param as the original init
   format: "YYYY-M-DD",
   minDate: moment(picker.toString(), "YYYY-MM-DD").toDate()
  });
 }
}


$(function() { //pikaday init
 $("#from").pikaday({
  format: "YYYY-MM-DD", //adjust to your liking
  minDate: moment().subtract({days: 1}).toDate()
 });

 $("#to").pikaday({
  format: "YYYY-MM-DD",
  minDate: moment().subtract({days: 1}).toDate()
 });
});
```
PS: n'oubliez pas d'inclure votre jquery, pickaday moment, fichiers js...

Espère que cela aide

puis-je avoir un pur javascript solution, Parce que je ne préfère pas jquery dans mon projet en cours.
var picker = new Pikaday({ field: document.getElementById('start') } ); var picker2 = new Pikaday({ field: document.getElementById('end'), minDate: new Date(document.getElementById('start').value) } }); J'ai essayé quelque chose comme cela pour atteindre la plage de date, mais Ça ne fonctionne pas.

OriginalL'auteur Dominik

Dans ce cas, des souches de toute autre personne, vous devez déclencher le code de @Dominik réponse une fois qu'une date a été choisie, à l'aide de la "onSelect" déclencheur. Mon code a fini comme ça (parce que je suis en utilisant le plugin jquery version tout au long du royaume-UNI format):

var dateFormat = "DD/MM/YYYY";

function dateRange() { //destroy to field and init with new param

  var $from = $("#from").pikaday({
    format: dateFormat,
  });

   if($from.val()) {
      $("#to").pikaday('destroy');
      $("#to").remove();
      $("#toField").html('<input type="text" name="to" id="to">');

      $("#to").pikaday({
        format: dateFormat,
        minDate: moment($from.val(), dateFormat).toDate()
      });
    }
}


$("#from").pikaday({
  format: dateFormat,
  minDate: moment().subtract({days: 1}).toDate(),
  onSelect: dateRange
});

$("#to").pikaday({
  format: dateFormat,
  minDate: moment().subtract({days: 1}).toDate()
});

OriginalL'auteur Ian Wootten

1

Ce qui suit est mon Javascript (sans jQuery) solution pour Partir et À datepickers à l'aide de Pikaday. Il fonctionne dans Chrome et Firefox, mais il ne fonctionne pas dans Chrome Android.
```
var nowDT = new Date();
var nowDTStr = nowDT.toShortDate();

var sin = document.createElement('input');
sin.setAttribute('type', 'text');
sin.setAttribute('id', this.id + "_cp_sin");
sin.style.width = '20%';
sin.style.cssFloat = 'left';
this.controlPanel.appendChild(sin);

this.sinPika = new Pikaday({
    field: sin,
    firstDay: 1,
    minDate: new Date('2001-01-01'),
    maxDate: new Date(nowDTStr),
    yearRange: [2001, nowDT.getFullYear()]
});
this.sinPika.setDate(nowDTStr);    

var ein = document.createElement('input');
ein.setAttribute('type', 'text');
ein.setAttribute('id', this.id + "_cp_ein");
ein.style.width = '20%';
ein.style.cssFloat = 'right';
this.controlPanel.appendChild(ein);

this.einPika = new Pikaday({
    field: ein,
    firstDay: 1,
    minDate: new Date('2001-01-01'),
    maxDate: new Date(nowDTStr),
    yearRange: [2001, nowDT.getFullYear()]
});
this.einPika.setDate(nowDTStr);
```
Depuis que j'ai sinPika et einPika objets ajoutés en tant que membres de ma classe, ils sont accessibles ailleurs dans ma classe, dans d'autres méthodes, où Pika objets sont utilisés pour extraire les dates fixées par les utilisateurs. La seule chose c'est que cette solution ne fonctionne pas dans Chrome Android pour moi. Quelqu'un pourrait-il essayer et laissez-moi savoir ce que vous trouvez?
Merci!

Modifier

J'ai trouvé le problème, pourquoi Pikaday ne fonctionnait pas sur chrome android pour moi. La raison en est que la pikaday.js (https://github.com/dbushell/Pikaday/blob/master/pikaday.js) est différente de celle ici http://dbushell.github.io/Pikaday/, en ce que la différence réside dans la fixation de la mousedown, touchend événements. Pikaday.js sur github attache comme ceci:
```
addEvent(self.el, 'ontouchend' in document ? 'ontouchend' : 'mousedown', self._onMouseDown, true);
```
(Je pense, Javascript définit touchend pas ontouchend, peut-être, c'est la raison pour laquelle Pikaday.js de dépôt github ne fonctionne pas.)

Et de la dbushell.github.io/Pikaday attache comme ceci:
```
addEvent(self.el, 'mousedown', self._onMouseDown, true);
```
À l'aide du script de http://dbushell.github.io/Pikaday/ fonctionne sur chrome android, l'une sur le repo git n'a pas.

OriginalL'auteur Vikrant

Je me rends compte que ce n'est pas tout à fait une réponse à la discussion de la question, mais si il est préférable de sélectionner une plage de dates à l'aide d'un contrôle, c'est la méthode que j'utilise:

var cal = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: (function() {
      var init = true,
          start,
          end;
      return function(date) {
        if (init) {
          start = date;
          picker.setStartRange(date);
          picker.setEndRange(null);
          rangeClear();
        } else {
          end = date;
          picker.setEndRange(date);
          rangeSet(start, end);
        }
        picker.draw();
        init = !init;
    }
    }())
});
cal.appendChild(picker.el);

Où la rangeSet et rangeClear fonctions existent ailleurs, avec les signatures suivantes:

function rangeSet(start, end) {
  //do something with the start and end dates
}
function rangeClear() {
  //clear the start and end dates
}

Vous pouvez voir ce travail ici: http://codepen.io/cshanejennings/pen/OMWLLg

OriginalL'auteur Shane

Vous devez vous connecter pour publier un commentaire.