Search code examples
datepickerwidgetyii-extensionscjuidialog

How to disable unavailable dates in the CJuiDatePicker widget


I am building a scheduling app. I am able to sort the database using the CJuiDatePicker widget's "onSelect" option. Now I am trying to use the "beforeShow" option to ensure that only dates that have tasks can be selectable. Can anyone help?

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model'=>$dataProvider,
    'attribute'=>'start_time',
    'options'=>array(
        'dateFormat' => 'yy-mm-dd',
        'changeMonth' => true,
        'changeYear' => true,
        'beforeShowDay' => 'js:$.datepicker.noWeekends',
        'beforeShow' => "js:function Check_Alert2(){
                                Check_Alert();
                            }
                            ",
        'onSelect' => "js:function SearchFunc()   {
                        var data = $('input').serialize();
                        var url = document.URL;
                        var params = $.param(data);
                        url = url.substr(0, url.indexOf('?'));
                        window.History.pushState(null, document.title,$.param.querystring(url, data));
                    }"
     ),
    'htmlOptions'=>array(
            'style'=>'height:20px;',
            'readonly' =>true,
        ),
    ));

Solution

  • i am still using the original code. I need an array generated within the beforeshowday. When i run your code it fails on the getdates() function call.

    'beforeShowDay' => 'js:function(date){
                                   var array = ["2013-10-30","2013-10-31","2013-12-18","2013-12-25"];
                                   var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
    
                                   if (array.indexOf(string) == -1){
                                   return [false,"", "No event"];
                                   } else return [true,"", "Event"];