勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQuery UIを用いた日付及び時間のピッカーの利用方法

   2024/01/13  jQuery JavaScript

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコードとサンプルをメモ。

 

参考サイト

http://103px.blog.fc2.com/blog-entry-28.html

 

サンプル

https://taitan916.info/sample/datetimepicker2/

 

ソース

<html>
    <head>
        <meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <link href="./css/datepicker.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.9.2.min.js"></script>
        <script type="text/javascript" src="./js/jquery.ui.datetimepicker.js"></script>
        <script type="text/javascript" src="./js/jquery.ui.datetimepicker-jp.js"></script>
        <script type="text/javascript">
$(function(){
$("#calender").datetimepicker();
});
</script>
    </head>
    <body>
        <form action="" method="post" name="">
            <input type="hidden" name="mode" value="regist">
            <table>
                <tr>
                    <th>日時</th>
                    <td colspan="3">
                        <input type="text" id="calender" name="calender">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

注意点

いつも使っているgoogleAPIのjQueryuiでは上手いこといかなかった。下記からダウンロードして使うことで改善された。

http://jqueryui.com/themeroller/

 - jQuery JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...