ボタンを押したら入力できるようにしたい

前提・実現したいこと

ボタンを押したら入力できるようにしたい。
今インプットタグを押したらデイトピッカーのカレンダーが表示されるようになっているが、
ボタンを押したらカレンダーは表示されない。
インプットタグではなく、ボタンを押したらカレンダーが表示されるようにしたい。

該当のソースコード

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <form name="userform" id="userform" action="javascript:void(0)" method="POST" enctype="multipart/form-data">
        <button>
        <font size="5">日時指定</font>
        <input type="text" id="datepicker" name="datepicker">
        </button>

        <button id="submit">検索</button>
    </form>


<script>

    jQuery.noConflict();
    var $j = jQuery;

    $j(function() {
      $j("#datepicker").datepicker();
      $j('#datepicker').attr('required');
    });
</script>

とコードを書いた。

試したこと

上記のコードの実装
どのように直せばいいのか？

m.ts10806

2018/05/22 14:28

タグにjQuery,jQuery UIも追加しておいてください。

行動規範の内容に同意します

回答1件

ベストアンサー

buttonタグに色々タグを詰め込むのはhtmlとして滅茶苦茶です。
あと、buttonタグのデフォルトはsubmitなので、送信してしまいますよ。
fontタグも非推奨要素です。

jQuery3.2.1を読みながらコンフリクトをしているのも良く分かりませんが…。

オプションがあるのでそれを使えば良いです。

datepickerにおけるオプション（datepicker）

html
1<p>日時指定</p>
2<input type="text" id="datepicker" name="datepicker">

js
1
2    $(function(){
3        $("#datepicker").datepicker({
4            showOn:"button",
5            buttonText:"カレンダー"
6        });
7    });
8    
9