Datepicker. How Disable Specific Days?

Yii 1.1 General Discussion
1

Hello!

How I can disable specific dates in DatePicker.

Weekends can be disabled by ‘beforeShowDay’=>‘js:$.datepicker.noWeekends’,

I’m trying code below, but it didn’t work :frowning:




<? $this->widget('zii.widgets.jui.CJuiDatePicker',array(

	'name'=>'publishDate',

	'language'=>'ru',

	'options'=>array(

		'showAnim'=>'fold',

		'minDate'=>'1',

		'maxDate'=>'15',

		// 'beforeShowDay'=>'js:$.datepicker.noWeekends',

		'beforeShowDay'=>'js:function() {

			var unavailableDates = ["9-3-2014", "14-3-2014", "15-3-2014"];

			var enableDay = ["3-3-2014", "10-3-2014", "17-3-2014"];

			var weekend = [0, 6];

			function nationalDays(date) {

				dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

				if ($.inArray(dmy, unavailableDates) > -1) {

					return [false, "", "Unavailable"];

				}

				if ($.inArray(dmy, enableDay) > -1) {

					return [true, ""];

				}

				if ($.inArray(date.getDay(), weekend) > -1) {

					return [false, "", "Unavailable"];

				}

				return [true, ""];

			}

			$(function() {

				$("#iDate").datepicker({

					beforeShowDay: nationalDays

				});

			});

		}',

	),

	'htmlOptions'=>array(

		'readonly'=>'readonly',

		'style'=>'height:16px; width:65px;',

	),

));

?>
2

That’s interesting feature, that you want to disable all national days in the calendar.

CJuiDatePicker is from jquery datapicker, and here is the code from Reigel, maybe can give you some idea.




var disabledDates = ['04/30/2010', '05/01/2010'];


$(function(){


    $('#datepicker').datepicker({


        dateFormat: 'dd/mm/yy',

        beforeShowDay: editDays

    });


    function editDays(date) {

        for (var i = 0; i < disabledDates.length; i++) {

            if (new Date(disabledDates[i]).toString() == date.toString()) {             

                 return [false];

            }

        }

        return [true];

     }   


});
3 

function editDays(date) {

        for (var i = 0; i < disabledDates.length; i++) {

            if (new Date(disabledDates[i]).toString() == date.toString()) {             

                 return [false]; // possible syntax error

            }

        }

        return [true]; // AGAIN

     }
4

Didn’t work for me :frowning:

Can’t understant where is an error in your script.

It’s show me only blank screen

Seems like there is a wrong cal function

‘beforeShowDay’=>'js:function()

5

First thing you need see Jquery DatePicker’s documents, and see how to use beforeShowDay function.

beforeShowDayType: Function( Date date )

Default: null

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable


[1]: a CSS class name to add to the date's cell or &quot;&quot; for the default presentation


[2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

Second, you need test if the code is good for Yii.

I found beforeShowDayType is not working well in Yii, so I did a little changes on that.

Here is my code, and I have tested that and it works as I wanted.




		<?php echo $form->textField($model,'user_end_date');		


Yii::app()->clientScript->registerScript('editDays', "

jQuery('#User_user_end_date').datepicker({

		'changeYear':true,

		'dateFormat':'mm/dd/yy',

		//'beforeShowDay': $.datepicker.noWeekends,

		'beforeShowDay': editDays,

	});

function editDays(date) {

				var disabledDates = ['03/31/2014', '03/13/2014', '03/19/2014'];

        		for (var i = 0; i < disabledDates.length; i++) {

            		if (new Date(disabledDates[i]).toString() == date.toString()) {

                		return [false,''];

            		}

        		}

        		return [true,''];

     		}

");

		?>

You can see my code disabled ‘03/31/2014’, ‘03/13/2014’, ‘03/19/2014’ as I expected.

1 Like
6

If you can repeat what I did, then next you can change the CJuiDatePicker.php function run()

Because in Yii code, it’s encode option values by




$options=CJavaScript::encode($this->options);

Which caused you cannot call the function name correctly.

Because "beforeShowDay" need a function, not a string value.

7

The new code is here, that we can use CJuiDatePicker




<?php //echo $form->textField($model,'user_end_date'); 

		$this->widget('zii.widgets.jui.CJuiDatePicker', array(

			'model'=>$model,

			'attribute'=>'user_end_date',

			'options'   => array(

				'changeYear' => true,

				'dateFormat' => 'mm/dd/yy',

				//'timeFormat' => '',//'hh:mm tt' default

				'beforeShowDay'=>'js:editDays',

			),

		));

		

Yii::app()->clientScript->registerScript('editDays', "

function editDays(date) {

				//alert('hello!');				

				var disabledDates = ['03/31/2014', '03/13/2014', '03/19/2014'];

        		for (var i = 0; i < disabledDates.length; i++) {

            		if (new Date(disabledDates[i]).toString() == date.toString()) {

                		return [false,''];

            		}

        		}

        		return [true,''];

     		}

");

?>

And it will got same result:

8

Thank you very much!

It’s worked :slight_smile: