Qualtricsの調査ではJavascriptの日付セレクタを使用して - 調査回答者は、カレンダーがフィールドをクリックして入力日付をポップアップ表示されますことができるように、私は、彼らは、入力に日付選択ツールをしようとしている調査のフィールドに日付を運ぶ

日付を選択することができ、日付はQualtricsの質問テキストボックスに入力されます。Qualtricsの調査ではJavascriptの日付セレクタを使用して - 調査回答者は、カレンダーがフィールドをクリックして入力日付をポップアップ表示されますことができるように、私は、彼らは、入力に日付選択ツールをしようとしている調査のフィールドに日付を運ぶ

Qualtricsは、利用可能な、独自のカレンダーツールを持っていますが、問題は、カレンダーが常に表示されているということです。テキストボックス自体をクリックするかカレンダーアイコンをクリックするだけでカレンダーが表示されるようにしたい（どちらかというとうまくいく）。ここでQualtricsのコードは次のとおりです。

Enter a date: 
<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script> <script> 
Qualtrics.SurveyEngine.addOnload(function() 
{ 
    var qid = this.questionId; 
    var calid = qid + '_cal'; 
    var y = QBuilder('div'); 
    $(y).setStyle({clear:'both'}); 
    var d = QBuilder('div',{className:'yui-skin-sam'},[ 
    QBuilder('div', {id:calid}), 
    y 
    ]); 

    var c = this.questionContainer; 
    c = $(c).down('.QuestionText'); 
    c.appendChild(d); 
    var cal1 = new YAHOO.widget.Calendar(calid); 
    cal1.render(); 
    var input = $('QR~' + qid); 
    $(input).setStyle({marginTop: '20px',width: '150px'}); 
    var p =$(input).up(); 
    var x = QBuilder('div'); 
    $(x).setStyle({clear:'both'}); 
    p.insert(x,{position:'before'}); 
    cal1.selectEvent.subscribe(function(e,dates){ 
    var date = dates[0][0]; 
    if (date[1] < 10) 
     date[1] = '0' + date[1]; 
    if (date[2] < 10) 
     date[2] = '0' + date[2]; 
    input.value = date[1] +'-'+date[2]+'-'+date[0]; 
    }) 
}); 
</script>

は、ここで私が使用したいカレンダーツールだが、私は日付がQualtricsフィールドテキストボックスに供給するために取得する方法を見つけ出すことはできません。

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker"></p> 


</body> 
</html>

出典

2016-10-14 Chris Ray

問題は、Qualtrics $はjQueryではなくprototypejsを指します。 DatePickerのコード自体はjQueryのを参照するために$を使用している場合は動作しないかもしれない、しかし

$j = jQuery.noconflict(); 
$j(function() { 
    $j("#datepicker").datepicker(); 
});

：だから、あなたは次のように何かをする必要があります。

私はQualtricsで正常https://github.com/joshsalverda/datepickrを使用しました。

EDIT： Quatricsでdatepickrを実装するには、次の

Qualtricsヘッダにdatepickrスクリプトを追加します（ファイルのURLは、スクリプトタグ内のヘッダに追加してもらう、その後Qualtricsにファイルをアップロードすることができます）
）入力要素（例えば、datepickr（$（this.questionId）.down（」のinputText。 '）にdatepickrを追加するために、あなたの質問にJavaScriptを追加
QualtricsカスタムCSSにdatepickr CSSを追加し、{DATEFORMAT' m/d/Y '}）。

出典

2016-10-14 19:31:15

hmmm、githubのリンクが動作していないようです...再リンクしてもよろしいですか？ –

ちょうど冗談です！それは今朝のDDoS攻撃に起因する...私は明日戻ってチェックするよ –

私は事実上何も経験がない。 JavascriptでQualtricsでこれを実装するためのいくつかの手順を説明していただけますか？ –

プレーンHTML日付入力（ないjQueryの必要はありません）を使用するフィールドに、このJavaScriptを追加します。

Qualtrics.SurveyEngine.addOnload(function() { 
    var textInputs = this.questionContainer.querySelectorAll('input[type="text"]'); 
    if (typeof textInputs[0] !== 'undefined') { 
     textInputs[0].type = 'date'; 
    } 
});

出典

2017-02-04 18:08:34

答えて

関連する問題