Yii Framework Forum: Datepicker. How Disable Specific Days? - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Datepicker. How Disable Specific Days? Rate Topic: -----

#1 User is offline   Mans2k 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 04-March 14

Posted 04 March 2014 - 08:37 AM

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 :-(

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

0

#2 User is offline   Johnny Gan 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 30-May 13

Posted 04 March 2014 - 10:00 AM

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];
     }   

});

0

#3 User is offline   alirz23 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,227
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 04 March 2014 - 10:40 AM

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
     }   

0

#4 User is offline   Mans2k 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 04-March 14

Posted 05 March 2014 - 01:51 AM

Didn't work for me :-(
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()
0

#5 User is offline   Johnny Gan 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 30-May 13

Posted 05 March 2014 - 12:53 PM

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 "" 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.
Posted Image
0

#6 User is offline   Johnny Gan 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 30-May 13

Posted 05 March 2014 - 01:15 PM

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.
0

#7 User is offline   Johnny Gan 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 205
  • Joined: 30-May 13

Posted 06 March 2014 - 09:26 AM

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:
Posted Image
0

#8 User is offline   Mans2k 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 04-March 14

Posted 07 March 2014 - 03:31 AM

Thank you very much!
It's worked :-)
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users