2016-09-13 47 views
0

私はwickedpickerを使用しており、2つの時間フィールドを持つページを持っています。要素からJqueryを削除して再適用しますか?

ボタンを押すごとに、各フィールドの時間を別々に更新する必要があります。

私が試したことはすべてうまくいかず、入力要素にスクリプトが既にバインドされている(正しい単語であるかどうかわからないため)と考えています。

私の質問は、読み込まれ、バインドされ、アンロードされ、次に別のパラメータで再適用されるスクリプトですか?

この

は、私が現在持っているコードです:

<script> 
     $(document).ready(function() { 
      $(".timepicker").wickedpicker({twentyFour: true}); 


      $("#btn").click(function(e) { 
       alert ('click') 
       $("#timeTwo").wickedpicker({twentyFour: true, now: "17:35"}); 
      }) 
     }); 
    </script> 

    <body> 

    <button id='btn' class='formBtn'>CHANGE</button> 

    <input type='text' class='timepicker' id='timeOne' name='timeOne' value='' > 

    <input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' > 

    </body> 

私はすぐにそれを使用する能力を必要とするように私はもともとtimepickerをロードするんだけど、私はまた、ボタンクリックから時刻を更新する機能が必要。

デフォルト値をtimeTwoに設定しようとしましたが、タイムピッカーによって上書きされています。私はJQueryを使ってvalのtimeTwoを設定し、入力は正しい値を示していますが、timepickerは現時点での表示であり、フィールドの表示ではありません。

アイデア? ありがとう

更新 要素の削除と読み込みが機能します。

$("#btn").click(function(e) { 
    console.log ('click') 
    var test = $("#timeTwo").remove(); 
    $('body').append(test); // later 
    $("#timeTwo").wickedpicker({twentyFour: true, now: '15:34'}); 
}); 

しかし、どうすれば同じ場所に戻ってくることを確認できますか? おかげ

+0

私はあなたの問題を解決し、私の更新の答え... –

答えて

1

wickedpickerを参照してください。..それを初期化:https://ericjgagnon.github.io/wickedpicker/は内部的に使用時間を設定する方法はありません。既に要素にwickedpickerがあるかどうかを検出すると、既に指摘したように、それを2度目に適用することはできません。 最もきれいな解決策は、必要な機能を持つwickedpickerを拡張することです。もう1つの回避策は、入力を削除し、再作成することです。

編集:私はあなたにピッカーの交換を示す小さなスニペットを作った。他のイベントや参照をdatepicker要素に/から壊すので、これは素晴らしい解決策ではありません。あなたはそれらに注意する必要があります。

オリジナルのwickedpickerを拡張することも非常に難しくありませんが、私はこの質問を超えていると思います。

PS:CSSの部分は無視してください。私はwickedpicker cssをインライン化して、正しいフォントを除いて動作させる必要がありました。 javascriptの部分だけが必要です。

$(document).ready(function() { 
 
    $(".timepicker").wickedpicker({ 
 
    twentyFour: true 
 
    }); 
 

 

 
    $("#btn").click(function(e) { 
 
    $("#timeTwo").replaceWith("<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />"); 
 
    $("#timeTwo").wickedpicker({ 
 
     twentyFour: true, 
 
     now: "17:35" 
 
    }); 
 
    }) 
 
});
.wickedpicker { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    box-shadow: 0 0 0 1px rgba(14, 41, 57, .12), 0 2px 5px rgba(14, 41, 57, .44), inset 0 -1px 2px rgba(14, 41, 57, .15); 
 
    background: #fefefe; 
 
    margin: 0 auto; 
 
    border-radius: .1px; 
 
    width: 270px; 
 
    height: 130px; 
 
    font-size: 14px; 
 
    display: none 
 
} 
 
.wickedpicker__title { 
 
    background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); 
 
    position: relative; 
 
    background: #f2f2f2; 
 
    margin: 0 auto; 
 
    border-bottom: 1px solid #e5e5e5; 
 
    padding: 12px 11px 10px 15px; 
 
    color: #4C4C4C; 
 
    font-size: inherit 
 
} 
 
.wickedpicker__close { 
 
    -webkit-transform: translateY(-25%); 
 
    -moz-transform: translateY(-25%); 
 
    -ms-transform: translateY(-25%); 
 
    -o-transform: translateY(-25%); 
 
    transform: translateY(-25%); 
 
    position: absolute; 
 
    top: 25%; 
 
    right: 10px; 
 
    color: #34495e; 
 
    cursor: pointer 
 
} 
 
.wickedpicker__close:before { 
 
    content: '\00d7' 
 
} 
 
.wickedpicker__controls { 
 
    padding: 10px 0; 
 
    line-height: normal; 
 
    margin: 0 
 
} 
 
.wickedpicker__controls__control, 
 
.wickedpicker__controls__control--separator { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    font-size: inherit; 
 
    margin: 0 auto; 
 
    width: 35px; 
 
    letter-spacing: 1.3px 
 
} 
 
.wickedpicker__controls__control-down, 
 
.wickedpicker__controls__control-up { 
 
    color: #34495e; 
 
    position: relative; 
 
    display: block; 
 
    margin: 3px auto; 
 
    font-size: 18px; 
 
    cursor: pointer 
 
} 
 
.wickedpicker__controls__control-up:before { 
 
    content: '\e800' 
 
} 
 
.wickedpicker__controls__control-down:after { 
 
    content: '\e801' 
 
} 
 
.wickedpicker__controls__control--separator { 
 
    width: 5px 
 
} 
 
.text-center, 
 
.wickedpicker__controls, 
 
.wickedpicker__controls__control, 
 
.wickedpicker__controls__control--separator, 
 
.wickedpicker__controls__control-down, 
 
.wickedpicker__controls__control-up, 
 
.wickedpicker__title { 
 
    text-align: center 
 
} 
 
.hover-state { 
 
    color: #3498db 
 
} 
 
@font-face{font-family:fontello;src:url(../fonts/fontello.eot?52602240);src:url(../fonts/fontello.eot?52602240#iefix) format("embedded-opentype"), 
 
url(../fonts/fontello.woff?52602240) format("woff"), 
 
url(../fonts/fontello.ttf?52602240) format("truetype"), 
 
url(../fonts/fontello.svg?52602240#fontello) format("svg"); 
 
font-weight:400; 
 
font-style:normal 
 
} 
 
.fontello-after:after, 
 
.fontello:before, 
 
.wickedpicker__controls__control-down:after, 
 
.wickedpicker__controls__control-up:before { 
 
    font-family: fontello; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    speak: none; 
 
    display: inline-block; 
 
    text-decoration: inherit; 
 
    width: 1em; 
 
    margin-right: .2em; 
 
    text-align: center; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    line-height: 1em; 
 
    margin-left: .2em; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale 
 
} 
 
.clearable-picker { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 
.clearable-picker>.hasWickedpicker { 
 
    padding-right: 1em 
 
} 
 
.clearable-picker>.hasWickedpicker::-ms-clear { 
 
    display: none 
 
} 
 
.clearable-picker>[data-clear-picker] { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    font-weight: 700; 
 
    font-size: .8em; 
 
    padding: 0 .3em .2em; 
 
    line-height: 1; 
 
    color: #bababa; 
 
    cursor: pointer 
 
} 
 
.clearable-picker>[data-clear-picker]:hover { 
 
    color: #a1a1a1 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/ericjgagnon/wickedpicker/master/dist/wickedpicker.min.js"></script> 
 

 
<button id='btn' class='formBtn'>CHANGE</button> 
 
<input type='text' class='timepicker' id='timeOne' name='timeOne' value='' /> 
 
<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />

+0

返事をありがとう。 wickedpickerはオプションとして「今」を持っています。しかし、それはあなたが一度それを変更することはできませんように見えます。私はそれをどのように拡張するのか考えていない。入力を削除して再作成するにはどうすればよいですか? – Tom

+0

'今'オプションは、新しいピッカーを作成するためのオプションです。あなたの最後の質問に対する答えについては、私の上で編集した記事を見てください。 –

+0

パーフェクト - おかげで多くのことができます – Tom

0

後述するようにあなたが行うことができます、あなたはオプションを変更することができますが、動的にした後、ここのようdocument

$(document).ready(function() { 
    $(".timepicker").wickedpicker({twentyFour: true}); 
    $("#btn").click(function(e) { 
     alert ('click') 
     $("#timeTwo").wickedpicker('twentyFour', true); 
     $("#timeTwo").wickedpicker('now', "17:35"); 
    }); 
}); 
+0

こんにちはを読んでわかりません。それは動作しません。ボタンをクリックするとアラートが表示され、それ以外は表示されません。 – Tom

関連する問題