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

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

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

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

Bootstrap

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

Q&A

解決済

2回答

2282閲覧

jquery.datepickerもしくはbootstrap datepickerを使って、blogの投稿があった日にリンクをつけたい

atLast

総合スコア14

JavaScript

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

Bootstrap

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

0グッド

0クリップ

投稿2016/04/10 06:17

編集2016/04/10 06:35

###前提・実現したいこと
jQuery.UI.datepicker もしくは、bootstrap-datepickerに
自宅サーバーで動作しているblog(WP)の投稿があった日にリンクを張りたいと思っています。
張ったリンクからは、実際の記事に飛ばしたいと考えています。
デフォルトでついているものではなく、自分で作ってみたく、質問しました。

出力できているデータは、YYYY/MM/DD形式と、パーマリンクのセット(JSON)です。

英語の文献含めて一通り探しましたが、実現方法がわかりませんでした。

ご教授いただけますと幸いです。

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

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

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

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

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

kei344

2016/04/10 06:22

datepickerが使用したいこと意外情報がありません。追記願います。たとえば、「blogの投稿」もCMSを利用しているのかレンタルブログなのかフレームワークベースで自作しているのかそのデータはどのような形で出力可能かなど、質問者しか知りえない部分について、具体的にお書きください。
guest

回答2

0

ベストアンサー

クリックしたら指定のURLに飛ばしたいなら、onSelectで判断してデータがあれば飛ばせばいいかと思います

1日にひとつの記事という前提ですがサンプルです

javascript

1// こんなデータ構造とする 2var data = [ 3 {date: "2014/12/11", url: "http://example.com/1"}, 4 {date: "2015/11/12", url: "http://example.com/2"}, 5 {date: "2016/10/13", url: "http://example.com/3"}, 6] 7 8 9var data_formated = {} // date -> url 10data.forEach(function(e){ 11 data_formated[new Date(e.date).toLocaleString()] = e.url 12}) 13 14$(elem).datepicker({ 15 onSelect: function(text, inst){ 16 var key = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay).toLocaleString() 17 var url = data_formated[key] 18 if(url){ 19 location.href = url 20 }else{ 21 alert("その日の記事はありません") 22 } 23 } 24})

投稿2016/04/10 10:49

ryls-nmm

総合スコア633

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

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

atLast

2016/04/11 05:52

回答ありがとうございます。 onSelectでは動作しなかった(bootstrap-datepicker 1.6.0)ため 回答いただいた例と、datepickerの .on('changeDate', function() { ~  で、任意の日付へ飛ばすことができました
guest

0

まず、jQuery.UI.datepicker/bootstrap-datepicker 共にフォームへの日付入力用ライブラリです。
そのため、「カレンダーの日付を押したらページ遷移」という目的には利用しにくいと思います。
(無理とは言い切りませんが新規で作る方がましなくらいの改造量になりそうな気がします)


カレンダー表示で有名なものの一つ、FullCalendar に WordPress からの出力を表示する例がありますので、こういう方法はどうでしょう。

【FullCalendar - JavaScript Event Calendar (jQuery plugin)】
http://fullcalendar.io/

【Custom Post Types: FullCalendar & JSON for WordPress】
http://www.noeltock.com/web-design/wordpress/events-custom-post-types-fullcalendar-json-wordpress/

【Create JSON feed of WordPress posts for FullCalendar.io · GitHub】
https://gist.github.com/aucoeurdesign/748c1dc28337cde6db98

投稿2016/04/10 10:05

kei344

総合スコア69364

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

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

atLast

2016/04/11 05:53

回答ありがとうございます。 こういう例もあるのですね。参考になりました。 困ったことがある場合また質問させていただくかもしれませんが その際はどうぞよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問