日付範囲にjquery-datepickerを使用する方法

Question

yiiで日付範囲にjquery-datepickerを使用する方法を教えてもらえますか？私はそれを複数の日付を取得するために変更する方法を単一の日付のために働くようにした。 私はyiiフレームワークの初心者です。

Answer 1

日付範囲の作成方法については、jQuery UIのドキュメントをご覧ください。

jQuery UIドキュメントを読み終えたら、どのように動作するのか理解しておく必要があります。次に、CJuiDatePickerウィジェットを使用して必要なものを生成することができます。

あなたのニーズに合わせてYiiウィジェットを調整するのは難しくありませんが、私はむしろ非常に簡単で効率的だと言いたいと思います。

Answer 2

たぶん、これはあなたが探していたの手掛かりである。

日付範囲が1つの日付を取得するためにdatepickerウィジェットを使用する方法を知っていると仮定2日付、どちらかの端に1つ

を持っています最も単純なアプローチは、ビュー内に2つの日付ピッカーをインスタンス化し、コントローラに送り返された2つの日付をモデルの日付範囲の端として使用することです。

Answer 3

例えばこれを試してみてください。

<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model'=>$model, 'attribute'=>'birthday', 
    'options'=>array(
     'dateFormat'=>'yy-mm-dd', 
     'yearRange'=>'-70:+0', 
     'changeYear'=>'true', 
     'changeMonth'=>'true', 
    ), 
)); ?> 

Answer 4

'options'=>array(
'showAnim'=>'fold', 
'dateFormat'=>'yy-mm-dd', 
'changeMonth'=>true, 
'changeYear'=>true, 
'yearRange'=>'-100:+0', 
'defaultDate'=>'+0' 
), 

Answer 5

私はCJuiDatePickerでそれを行うための解決策を見つけることができませんでした。代わりに、私は私のビューファイルに次のように使用：

<?php 
Yii::app()->getClientScript()->registerCoreScript('jquery.ui'); 
Yii::app()->clientScript->registerCssFile(
    Yii::app()->clientScript->getCoreScriptUrl(). 
    '/jui/css/base/jquery-ui.css' 
); 
Yii::app()->clientScript->registerScript('daterangescript'," 
    var dates = $('#ReportForm_date_start, #ReportForm_date_end').datepicker({ 
     defaultDate: '+1w', 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onSelect: function(selectedDate) { 
      var option = this.id == 'ReportForm_date_start' ? 'minDate' : 'maxDate', 
       instance = $(this).data('datepicker'); 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates.not(this).datepicker('option', option, date); 
     } 
    }); 

    $('#ReportForm_date_start, #ReportForm_date_end').datepicker('option', 'dateFormat', 'yy-mm-dd'); 
",CClientScript::POS_READY); 
?> 

は、独自の要素のidにReportForm_date_startとReportForm_date_endを置き換えることを忘れないでください。

Answer 6

オプションに 'yearRange'を追加できます。 「開始日：終了日」、「yearRange」=>「2008：2018」、「 」、またはこの年の前後に「 - and +」を使用してコードを書き込むことができます。 'yearRange '=>' - 8：+8 'は、この年の8年前と今年の8年後を意味します。

Answer 7

のYii CJuiDatePicker：日付範囲

<?php 
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-min-max',  
    'value'=>date('d-m-Y'), 
    'options'=>array(  
     'showButtonPanel'=>true, 
     'minDate'=>-5, 
     'maxDate'=>"+1M +5D", 
    ), 
    'htmlOptions'=>array(
     'style'=>'' 
    ), 
)); 
?> 

Answer 8

From: <input type="text" name="date_from" id="date_from" />   
To: <input type="text" name="date_to" id="date_to" /> 


    <?php 
     $this->widget('zii.widgets.jui.CJuiDatePicker', array(
      'name' => 'date_from', 
      // additional javascript options for the date picker plugin 
      'options' => array(
       'showAnim' => "slideDown", 
       'changeMonth' => true, 
       'numberOfMonths' => 1, 
       'showOn' => "button", 
       'buttonImageOnly' => false, 
       'dateFormat' => "yy-mm-dd", 
       'showButtonPanel' => true, 
       'onClose' => 'js:function(selectedDate) { $("#date_to").datepicker("option", "minDate", selectedDate); }',    
      ) 
     )); 
     $this->widget('zii.widgets.jui.CJuiDatePicker', array(
      'name' => 'date_to', 
      // additional javascript options for the date picker plugin 
      'options' => array(
       'showAnim' => "slideDown", 
       'changeMonth' => true, 
       'numberOfMonths' => 1, 
       'showOn' => "button", 
       'buttonImageOnly' => false, 
       'dateFormat' => "yy-mm-dd", 
       'showButtonPanel' => true, 
       'onClose' => 'js:function(selectedDate) { $("#date_from").datepicker("option", "maxDate", selectedDate); }', 
      ) 
     )); 
?> 

チュートリアル：http://wimarbueno.blogspot.com/2014/04/Yii-CJuiDatePicker-rango-de-fechas-en-datepicker-de-jQuery-UI.html