JavaScript

Javascript

「jQuery ui Datepicker」の基本的な使い方

先日フォームの作成依頼があった際に、

日付欄はユーザーに直接入力させるのではなく、datepickerで選択出来るようにしたいと

お客様から要望がありました。

 

ということで、

久しぶりに

jQuery ui Datepicker

を使うことに!!

 

設置方法は簡単です!!

 

jQuery ui Datepickerの設定方法

まず、<head>~</head>の間に、

の3行を追記して、CSSとjQueryのコードを読み込んでやります。

 

さらに、

を<head>~</head>の間の適当な場所に追記します。

 

あとは、

該当のテキストボックスに「id="datepicker"」を追記するだけです。

 

まとめるとこんなソースになります↓↓

これだけで動作するので、

非常にシンプルで便利ですね!!

 

テキストボックスをクリックすると以下の様な感じでdatepickerが立ちあがります。
jQuery_Datepicker サンプル

 

jQuery UI Datepicker デモ

 

テーマ(デザインカラー)の変更

テーマも複数用意されているので、

好みやサイトに合わせたデザインカラーに変更することも出来ます。
http://jqueryui.com/themeroller/

 

例えば、「UI lightness」というテーマを使いたい場合には、

読み込むCSSを

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

に変更すればいいだけです。

 

見た目はこのようになります↓↓
jQuery_Datepicker UI lightness

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    Google Maps API Ver.3 で地図を表示

    久しぶりにGoogleMap APIを利用しようとして、今更なんで…

  2. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

  3. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    普段物件画像を取り扱うシステムを構築することが多いんですが、不動産…

  4. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  5. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  6. JavaScript

    Javascript

    jQuery - $("select") / $('select[name="name属性"]')

    本日ですが、セレクトボックス(プルダウン)を一括で操作したくて、…

最近の記事

  1. レンタルサーバ
  2. コピペ(Copy and Paste)
  3. Check Copy Contents(CCC)
  4. WordPress(WP)
  5. セキュリティ
  6. セキュリティ
  7. THE THOR(ザ・トール)
  8. SONY α6400の本体
  9. THE THOR(ザ・トール)
  10. 短縮URL
PAGE TOP