4

JQuery Datepickerがプロトタイプライブラリと競合しているため、Pikadayを日付ピッカーとして使用しています。

ここにいくつかの問題があります。

  1. 複数のテキストボックスでpikadaydatepickerを使用するにはどうすればよいですか
  2. 日付のフォーマット方法。以前はJQueryDatepickerを使用してフォーマットを変更するには
    、dateFormat： "dd M yy"、を追加するだけで済みます。

これがサンプルコードです

<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>
4

4 に答える 4

6

ピカデイが日付範囲タイプのものを一緒に動作させてから、最初に選択した日付に従って最後のものを操作する方法を探していると思いますか？...これは少し遅いと思いますが、おそらく他の誰かが答えに興味を持っています：

Pikadayはここでは何も提供していませんが、インスタンスを破棄し、「from」ピッカーで1日が選択されたときにインスタンスを再作成することで、これを回避することができました。

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：jquery、pickaday、momentjsファイルを含めることを忘れないでください...

それが役に立てば幸い

于 2013-02-04T04:41:51.117 に答える
2

これは op の質問に対する完全な回答ではないことは承知していますが、1 つのコントロールを使用して日付範囲を選択することが望ましい場合は、これが私が使用している方法です。

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);

rangeSet および rangeClear 関数が別の場所に存在し、次のシグネチャが使用される場所:

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

これが機能しているのをここで見ることができます: http://codepen.io/cshanejennings/pen/OMWLLg

于 2015-12-31T22:14:05.120 に答える