Show datepicker in text/text grid questions - Revision history

Cg pham at 02:17, 13 February 2014

2014-02-13T02:17:15Z

← Older revision		Revision as of 02:17, 13 February 2014
Line 1:		Line 1:
	==Challenge==		== Challenge ==

	In order to help the interviewer be faster in entering a meeting day		In order to help the interviewer be faster in entering a meeting day

Line 6:		Line 7:
	I want to show a calendar inside a text/text grid question		I want to show a calendar inside a text/text grid question

	'''Example'''		'''Example'''<br/>[[File:ShowDatetimePicker.jpg]]
	<br>
	[[~~Image~~:ShowDatetimePicker.jpg]]

	==Solution==		== Solution ==
	*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
			*Use jquery's datepicker (read more at: [http://docs.jquery.com/UI/Datepicker http://docs.jquery.com/UI/Datepicker])
	*Add a Text grid question to Questionnaire editor like below		*Add a Text grid question to Questionnaire editor like below
	*Go to menu Properties -> Question scripts -> Java script tab -> Input script		*Go to menu Properties -> Question scripts -> Java script tab -> Input script
	[[~~Image~~:ShowDatetimePicker1.jpg]]
			[[File:ShowDatetimePicker1.jpg]]

	*Update the layout to include the style sheet for the datepicker		*Update the layout to include the style sheet for the datepicker
	[[~~Image~~:ShowDatetimePicker2.jpg]]
			[[File:ShowDatetimePicker2.jpg]]

	*Remember to validate the text value when clicking Next (not to be written here)		*Remember to validate the text value when clicking Next (not to be written here)

	==Code==		== Code ==

	*Javascript		*Javascript

	<source lang="javascript">		<source lang="javascript">
	function getQuestionTextBox(label, sqIndex)		function getQuestionTextBox(label, sqIndex)
	{		{
	return $("input[name='QUESTION."+ label + "." + sqIndex + "']");		return $("input[name='QUESTION."+ label + "." + sqIndex + "']");
	}		}

	quest.onInit = function()		quest.onInit = function()
	{		{
	var qTB = getQuestionTextBox("Q_MeetingTime_TextGrid_ShowDatetimePicker", 0);		var qTB = getQuestionTextBox("Q_MeetingTime_TextGrid_ShowDatetimePicker", 0);

	qTB.datepicker(		qTB.datepicker(
	{		{
	dateFormat: 'dd-mm-yy',		dateFormat: 'dd-mm-yy' onSelect: functions () {}
	changeMonth: true,		changeMonth: true,
	nextText: '>',		nextText: '>',
	prevText: '<',		prevText: '<',
	firstDay: 1		firstDay: 1
	}		}
	);		);

	$("input:text").width("200px");		$("input:text").width("200px");
	}		}
	</source>		</source>

	*CSS		*CSS
	<source lang=css>
			<source lang="css">
	/* Datepicker----------------------------------*/		/* Datepicker----------------------------------*/
	.ui-datepicker { width: 17em; padding: .2em .2em 0; background-color:#dfeaf1;font-family:Verdana}		.ui-datepicker { width: 17em; padding: .2em .2em 0; background-color:#dfeaf1;font-family:Verdana}
Line 60:		Line 68:

	.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span		.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span
	{ display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }		{ display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }

	.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }		.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
Line 90:		Line 98:

	.ui-datepicker-cover {		.ui-datepicker-cover {
	display: none; /sorry for IE5/		display: none; /sorry for IE5/
	display/*/: block; /sorry for IE5*/		display/*/: block; /sorry for IE5*/
	position: absolute; /must have/		position: absolute; /must have/
	z-index: -1; /must have/		z-index: -1; /must have/
	filter: mask(); /must have/		filter: mask(); /must have/
	top: -4px; /must have/		top: -4px; /must have/
	left: -4px; /must have/		left: -4px; /must have/
	width: 200px; /must have/		width: 200px; /must have/
	height: 200px; /must have/		height: 200px; /must have/
	}		}
	</source>		</source>

	== Source ==		== Source ==

	Questionnaire Resource Id on cg site: 159730		Questionnaire Resource Id on cg site: 159730

Cg van: /* Challenge */

2012-02-02T10:21:20Z

Challenge

← Older revision		Revision as of 10:21, 2 February 2012
Line 7:		Line 7:

	'''Example'''		'''Example'''
			<br>
	[[Image:ShowDatetimePicker.jpg]]		[[Image:ShowDatetimePicker.jpg]]

Cg van: /* Code */

2012-02-02T10:20:41Z

Code

← Older revision		Revision as of 10:20, 2 February 2012
Line 28:		Line 28:
	quest.onInit = function()		quest.onInit = function()
	{		{
	var qTB = getQuestionTextBox("Q2", 0);		var qTB = getQuestionTextBox("Q_MeetingTime_TextGrid_ShowDatetimePicker", 0);

	qTB.datepicker(		qTB.datepicker(
Line 37:		Line 37:
	prevText: '<',		prevText: '<',
	firstDay: 1		firstDay: 1

	}		}
	);		);

	$("input:text").width("200px");		$("input:text").width("200px");
	}		}
	</source>		</source>
Line 66:		Line 65:
	.ui-datepicker select.ui-datepicker-month-year {width: 100%;}		.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
	.ui-datepicker select.ui-datepicker-month,		.ui-datepicker select.ui-datepicker-month,
	.ui-datepicker select.ui-datepicker-year { width: 49%;}		.ui-datepicker select.ui-datepicker-year { width: 30%;}
	.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }		.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
	.ui-datepicker-year{color:~~white~~;font-weight:bold;}		.ui-datepicker-year{color:black;font-weight:bold;}
	.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }		.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
	.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-family:Verdana }		.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-family:Verdana }

Cg van: /* Solution */

2012-02-02T10:19:19Z

Solution

← Older revision		Revision as of 10:19, 2 February 2012
Line 11:		Line 11:
	==Solution==		==Solution==
	*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)		*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
	*~~Update the layout~~ to ~~include the stylesheet for the datepicker~~		*Add a Text grid question to Questionnaire editor like below
			*Go to menu Properties -> Question scripts -> Java script tab -> Input script
	[[Image:ShowDatetimePicker1.jpg]]		[[Image:ShowDatetimePicker1.jpg]]
			*Update the layout to include the style sheet for the datepicker
			[[Image:ShowDatetimePicker2.jpg]]
	*Remember to validate the text value when clicking Next (not to be written here)		*Remember to validate the text value when clicking Next (not to be written here)
	~~[[Image:ShowDatetimePicker2.jpg]]~~

	==Code==		==Code==

Cg van: /* Solution */

2012-02-02T10:17:30Z

Solution

← Older revision		Revision as of 10:17, 2 February 2012
Line 12:		Line 12:
	*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)		*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)
	*Update the layout to include the stylesheet for the datepicker		*Update the layout to include the stylesheet for the datepicker
			[[Image:ShowDatetimePicker1.jpg]]
	*Remember to validate the text value when clicking Next (not to be written here)		*Remember to validate the text value when clicking Next (not to be written here)
			[[Image:ShowDatetimePicker2.jpg]]

	==Code==		==Code==
	*Javascript		*Javascript

Cg van: /* Challenge */

2012-02-02T09:39:43Z

Challenge

← Older revision		Revision as of 09:39, 2 February 2012
Line 7:		Line 7:

	'''Example'''		'''Example'''

	[[Image:ShowDatetimePicker.jpg]]		[[Image:ShowDatetimePicker.jpg]]

Cg van: /* Challenge */

2012-02-02T09:39:22Z

Challenge

← Older revision		Revision as of 09:39, 2 February 2012
Line 7:		Line 7:

	'''Example'''		'''Example'''
	[[Image:~~Datepicker_in_question~~.~~png~~]]
			[[Image:ShowDatetimePicker.jpg]]

	==Solution==		==Solution==
	*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)		*Use jquery's datepicker (read more at: http://docs.jquery.com/UI/Datepicker)

Cg van at 05:08, 2 February 2012

2012-02-02T05:08:39Z

← Older revision		Revision as of 05:08, 2 February 2012
Line 1:		Line 1:
	==Challenge==		==Challenge==
	In order to help the interviewer be faster in entering a meeting day~~<br/>~~		In order to help the interviewer be faster in entering a meeting day
	As a questionnaire creator~~<br/>~~
	I want to show a calendar inside a text/text grid question~~<br/>~~		As a questionnaire creator

			I want to show a calendar inside a text/text grid question

			'''Example'''
	[[Image:Datepicker_in_question.png]]		[[Image:Datepicker_in_question.png]]
	==Solution==		==Solution==
Line 91:		Line 95:
	}		}
	</source>		</source>

			== Source ==
			Questionnaire Resource Id on cg site: 159730

Catglobe: /* Code */ change from returm to return

2010-02-12T10:10:38Z

Code: change from returm to return

← Older revision		Revision as of 10:10, 12 February 2010
Line 13:		Line 13:
	function getQuestionTextBox(label, sqIndex)		function getQuestionTextBox(label, sqIndex)
	{		{
	~~returm~~ $("input[name='QUESTION."+ label + "." + sqIndex + "']");		return $("input[name='QUESTION."+ label + "." + sqIndex + "']");
	}		}

Catglobe: /* Code */

2009-10-26T09:49:00Z

Code

@@ Line 13: / Line 13: @@
 function getQuestionTextBox(label, sqIndex)
+{
-	var result;
+   returm $("input[name='QUESTION."+ label + "." + sqIndex + "']");
+}
 quest.onInit = function()
+{
 	var qTB = getQuestionTextBox("Q2", 0);
 	$("input:text").width("200px");
+}