
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.05.08
jQuery UI の datepicker を利用すると カレンダーから日付を入力することができますが、datetimepicker を利用すると 日付に加えて時刻まで選択することができます。
今回は、datetimepicker の 使用方法について紹介します。
datepicker のサンプル等については、以下のページをご参照下さい。
jQuery【 jQuery UI 】datepicker でカレンダーを表示するサンプル
jQuery【 jQuery UI 】datepicker のオプションと設定方法
1.datetimepicker を読み込む
2.datetimepicker の使用方法
datetimepicker を利用するためには、DateTimePicker プラグインを 別途読み込む必要があります。
以下の方法で DateTimePicker プラグインを読み込みます。
まず、公式ページからダウンロードします。
赤枠のアンカーをクリックして zip ファイルをダウンロードして下さい。
次に、ダウンロードした zip ファイルを展開して、「 datetimepicker-master 」フォルダの中の「 jquery.datetimepicker.js 」と「 jquery.datetimepicker.css 」を使用します。
jQuery の読み込みと共に、次のように「 jquery.datetimepicker.js 」及び「 jquery.datetimepicker.css 」を読み込みます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script src="ファイルパス/jquery.datetimepicker.js"></script> <link rel="stylesheet" href="ファイルパス/jquery.datetimepicker.css">
ファイルパス( ファイルの保存場所 )の記載にご注意下さい。
CDN を利用して、datetimepicker を直接読み込む方法もあります。
CDN( Contents Delivery Network, CDN )とは、Webコンテンツを インターネット経由で配信するためのネットワークを意味しています。
CDN を利用する場合は、必要なファイルを ダウンロードすることなく 直接読み込むことができます。
CDN を利用する場合は、jQuery と共に 次のように記述して読み込みます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/jquery.datetimepicker.css">
datetimepicker を使用して、カレンダーを表示します。
入力欄をクリックしてみて下さい。
また、表示されたカレンダーから任意の日時をクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/jquery.datetimepicker.css"> <script type="text/javascript"> <!-- $(function () { $("#wkDateTime").datetimepicker(); }); //--> </script> <div style="background-color:#CCC; padding : 20px;"> <input type="text" id="wkDateTime"> </div>
上記は、CDNを利用して datetimepicker を直接読み込んでいますが、ダウンロードファイルを読み込む場合には、ファイルパスの記述にご注意下さい。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.