Cách sử dụng jquery-datepicker cho phạm vi ngày

Question

Ai đó có thể cho tôi biết cách sử dụng jquery-datepicker cho phạm vi ngày trong yii? Tôi đã nhận nó để làm việc cho một ngày duy nhất làm thế nào để tôi sửa đổi nó để có được một ngày nhiều. Tôi mới vào khung yii.

Answer 1

Vui lòng làm theo jQuery UI tài liệu để tìm hiểu cách tạo phạm vi ngày.

Sau khi đọc tài liệu về giao diện người dùng jQuery, bạn nên hiểu nó hoạt động như thế nào. Sau đó, bạn có thể sử dụng tiện ích CJuiDatePicker để tạo ra những gì bạn cần.

Thật khó để điều chỉnh các tiện ích Yii theo nhu cầu của bạn, tôi muốn nói nó rất đơn giản và hiệu quả.

Answer 2

Có lẽ đây là đầu mối bạn đang tìm kiếm:

một phạm vi ngày có 2 ngày, một ở hai đầu

Giả sử bạn biết làm thế nào để sử dụng datepicker phụ tùng để lấy một ngày duy nhất từ người dùng, cách tiếp cận đơn giản nhất là chỉ cần khởi tạo 2 trình tạo ngày trong chế độ xem của bạn và sử dụng 2 ngày được gửi lại cho bộ điều khiển của bạn dưới dạng các cạnh của phạm vi ngày trong mô hình của bạn.

Answer 3

Hãy thử này Ví dụ:

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

Tôi không tìm ra giải pháp để làm điều đó với CJuiDatePicker. Thay vào đó, tôi đã sử dụng sau đây trong tập tin quan điểm của tôi:

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

Đừng quên để thay thế ReportForm_date_start và ReportForm_date_end để id yếu tố của riêng bạn.

Answer 6

bạn có thể thêm 'yearRange' vào tùy chọn. bạn có thể điền vào nó với 'ngày bắt đầu: ngày kết thúc', ví dụ 'yearRange' => '2008: 2018', hoặc, bao nhiêu năm trước và sau năm nay, viết mã bằng - và +, example 'yearRange '=>' - 8: +8 ', có nghĩa là 8 năm trước năm này và 8 năm sau năm này.

Answer 7

Yii CJuiDatePicker: Phạm vi Ngày

<?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); }', 
      ) 
     )); 
?> 

Hướng dẫn: http://wimarbueno.blogspot.com/2014/04/Yii-CJuiDatePicker-rango-de-fechas-en-datepicker-de-jQuery-UI.html