質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

3回答

13071閲覧

bootstrap-datepickerをカスタマイズした際に日付選択のポップアップの位置がずれてしまう

hidepon

総合スコア206

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/04/08 06:27

bootstrap-datepickerをカスタマイズした際に日付選択のポップアップの位置がずれてしまいます。
cssファイルを設定したり、JSファイル内で調整をしようとしますが、レスポンシブに対応する位置調整ができません。
現状ではブラウザの左上端に配置されてしまいます。
スマホであれば、画面内に入ってきません。

<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/css/bootstrap-datepicker.css"> <link href="/css/common_kintai.css" rel="stylesheet" type="text/css"> <script src="/js/bootstrap.min.js"></script> <script language="javascript" src="/js/jquery-2.1.4.min.js" type="text/javascript"></script> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script type="text/javascript" src="/js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="/js/bootstrap-datepicker.ja.js"></script> (中略) <table id="pt2" border="1" class="table ap_table"> <tbody> <tr> <th>実施日2</th> <td> <input type="text" id="target_year2" name="target_year2" size="4" maxlength="4" class="inp" value="<?php echo $target_year;?>" />年 <input type="text" id="target_month2" name="target_month2" size="2" maxlength="2" class="inp" value="<?php echo $target_month;?>" />月 <input type="text" id="target_day2" name="target_day2" size="2" maxlength="2" class="inp" value="<?php echo $target_day;?>" />日 <input type="button" id="dp_pos2" name="dp_pos2" value="日付選択" /> <input type='hidden' id='container' /> </td> </tr> </tbody> </table> <div id='dpbody' style='position:absolute;left:200px'></div> //JSコード $('#container').datepicker({ language : "ja", container : '#dpbody' }).on('changeDate', function(e){ if(e.date){ var d = e.date; $('#target_year2').val( d.getFullYear() ); $('#target_month2').val( d.getMonth() + 1 ); $('#target_day2').val( d.getDate()); } $(this).datepicker('hide') }); $('#dp_pos2').on('click', function(){ $('#container').datepicker('show').on( 'changeDate', function( e ) { $( '#target_year2' ).val( e.date.getFullYear() ); $( '#target_month2' ).val( e.date.getMonth() + 1 ); $( '#target_day2' ).val( e.date.getDate()); $(this).datepicker('hide') }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

option「container」の指定がない場合bodyタグ内部に日付選択表示が展開されます。
(chromeなら開発者ツールから「どのタグに」「どんな内容が」追加/削除されているのか確認できます)
指定がある場合、指定されたElement内部に日付選択表示が展開されます。
たとえば「container : '#dpbody'」の指定がある場合(つまり質問者さんのソースの場合)、「<div id='dpbody'></div>」のタグ内に日付選択表示が展開されるわけで。
ここでの問題は「<div id='dpbody'></div>を画面の任意の位置に表示するにはどうすればいいか?」ということなので質問者ソースの内容が情報過多といえます。(正直タイトルの「bootstrap-datepickerをカスタマイズした際に」とそれに関するjavascriptソースは不要で、逆にこれがあることによって回答者の敷居を上げる結果になってると思う)
kei344さんの回答を踏まえて案を出すと、対象のタグを別のタグで囲って

html

1<div><!-- ←このタグが「dpbodyの表示位置に対する基準となる --> 2 <div id='dpbody' style='position:relative;left:50%;'></div> 3</div>

のようにするといいかもしれません。
(実際のleftの値は要微調整)

投稿2016/04/08 19:47

編集2016/04/08 20:03
tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2016/04/11 02:42

http://creatorclip.info/2014/05/css-layout-center/ を参考にCSSの調整で日付選択のポップアップを <input type="button" id="dp_pos2" name="dp_pos2" value="日付選択" />の下 に表示させたい(スマホなどでは画面中央部にでも) と考えていました。 ご回答の修正によりスマホでも画面上部左端に表示されるようになりましたが、PCブラウザでは依然として画面左端上部に表示されています。 <input type='hidden' id='container' />の基準位置に表示されるようにしたいと思っています。ちょっと難しい領域に踏み込んでしまったようで・・・。申し訳ございません。 <td> <input type="text" id="target_year2" name="target_year2" size="4" maxlength="4" class="inp" value="<?php echo $target_year;?>" />年 <input type="text" id="target_month2" name="target_month2" size="2" maxlength="2" class="inp" value="<?php echo $target_month;?>" />月 <input type="text" id="target_day2" name="target_day2" size="2" maxlength="2" class="inp" value="<?php echo $target_day;?>" />日 <input type="button" id="dp_pos2" name="dp_pos2" value="日付選択" /> <input type='hidden' id='container' /> <div style="width:100%;text-align:center;"> <div id='dpbody' style='position:relative;left:50%;'></div> </div> </td> ともしてみました。 宜しくお願い足します。
hidepon

2016/04/11 13:15

いろいろとご返答を頂き有難うございます。いろいろ試してみたんですが、厳しそうですね・・・ちょっと自分にはハードルが高かったような気がします。心が折れました・・・orz ちょっとクールダウンしてみます。
guest

0

デフォルトの状態でデータ登録して受け取った側で正規表現でデータ整形する方式にしました。

投稿2016/04/28 07:52

hidepon

総合スコア206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

hiddenの要素を基点に描画されているから、と言う可能性が考えられます。

HTML

1<div style="position: relative;"> 2 <input type="button" id="dp_pos2" name="dp_pos2" value="日付選択" /> 3 <input type='hidden' id='container' /> 4</div>

投稿2016/04/08 17:13

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問