javascript-使用DatePicker（仅月日期，无年份），Moment.js和JSON填充事件或报价

Question

这里是新手，但我正在尽快学习。 上交JavaScript，HTML，CSS。 虽然用这种专业的东西在我头上。 （请友善...尝试到达那里）

我有一个报价单的JSON文件，该报价单链接到一年中的每一天（按月日期）。 我想使用“月/日”日历选择器（如附件图像）供用户选择。 最终结果将是所选月份/日期的报价。 没有随机的。 特定日期的特定报价。

年份无所谓，所以最好不要使用它 。

我在将要跨平台的移动应用程序上使用jQuery和moment.js（尽管在iOS上启动）。 希望电话间隙将使我免于更多的痛苦。

我搜索了论坛，并通过StackOverFlow和一些StackExchange寻找了答案。 我尝试了不同的建议，但没有成功。 我的代码有点令人费解，但是确实如此。

（这是我的第一篇文章，并尝试遵守4个空格的规则。不确定是否基于发帖前的评论-但这是代码块中的4个空格。）

 $(document).ready(function() { var calendar = new Date().getDate();; var dd = new Date().getDate(); var mm = new Date().getMonth() + 1; var dailyQuote = { "April 19": { "quote": "Blessed is the one who considers the poor! . . .", "refTag": "Psalm 41:1-2" }, "April 20": { "quote": "We who are strong have an obligation....", "refTag": "Romans 15:1" }, "April 21": { "quote": "Remember those who are in prison, ....", "refTag": "Hebrews 13:3" }, "April 22": { "quote": "Pride goes before destruction....", "refTag": "Proverbs 16:18", "quote2": "Before destruction a man's heart is haughty, but humility comes before honor.", "refTag2": "Proverbs 18:12" }, "April 23": { "quote": "Let no one deceive himself....", "refTag": "1 Corinthians 3:18-21" }, "April 24": { "quote": "Haughty eyes and a proud heart, the lamp of the wicked, are sin.", "refTag": "Proverbs 21:4" }, "December 30": { "quote": "I have fought the good fight, I have finished the race, ...", "refTag": "2 Timothy 4:7-8" }, "December 31": { "quote": "May the Lord fulfill all your petitions!", "refTag": "Psalm 20:5" } }; console.log(dailyQuote); var bCode = moment().format("MMMM D"); $("#selectedDate").html(moment().format("MMMM D")); $("#selectedVerse").html(dailyQuote[bCode].quote); $("#selectedVerseRefTag").html(dailyQuote[bCode].refTag); $("#selectedVerse2").html(dailyQuote[bCode].quote2); $("#SelectedVerseRefTag2").html(dailyQuote[bCode].refTag2); $("#selectedTime").html(moment().format("MMMM Do YYYY, h:mm:ss a")); document.getElementById("script").innerHTML = dailyQuote; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> <div class="calendarPicker"> <h1>Pick a Date: <input type="date" id="calendar" format="MM D"></h1> <input type="text" id="quote" value="insert w/Quote>>>"> <textarea id="script" value="Text area"></textarea> <h2 class="quote"> Selected date area: <span id="selectedDate"></span></h2> </div> 

日期选择器日历滚动图像

Answer 1

我想你需要这样的东西〜

 var dailyQuote = { "April 19": { "quote": "Blessed is the one who considers the poor! . . .", "refTag": "Psalm 41:1-2" }, "April 20": { "quote": "We who are strong have an obligation....", "refTag": "Romans 15:1" }, "April 21": { "quote": "Remember those who are in prison, ....", "refTag": "Hebrews 13:3" }, "April 22": { "quote": "Pride goes before destruction....", "refTag": "Proverbs 16:18", "quote2": "Before destruction a man's heart is haughty, but humility comes before honor.", "refTag2": "Proverbs 18:12" }, "April 23": { "quote": "Let no one deceive himself....", "refTag": "1 Corinthians 3:18-21" }, "April 24": { "quote": "Haughty eyes and a proud heart, the lamp of the wicked, are sin.", "refTag": "Proverbs 21:4" }, "December 30": { "quote": "I have fought the good fight, I have finished the race, ...", "refTag": "2 Timothy 4:7-8" }, "December 31": { "quote": "May the Lord fulfill all your petitions!", "refTag": "Psalm 20:5" } }; $(document).ready(function() { var calendar = moment().format("YYYY-MM-DD"); var dateControl = document.querySelector('input[type="date"]'); dateControl.addEventListener( 'change', function() { getQuote(this.value); }, false ); dateControl.value = calendar; setQuote(calendar); function getQuote(date) { setQuote(date); } function setQuote(date) { var bCode = moment(date).format('MMMM D'); $("#selectedDate").html(bCode); if (dailyQuote[bCode]) { $("#selectedVerse").html(dailyQuote[bCode].quote); $("#selectedVerseRefTag").val(dailyQuote[bCode].refTag); } else { $("#selectedVerse").html(''); $("#selectedVerseRefTag").val('No quote for today.'); } } }); 

 .pick-date>h1, .pick-date>input { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> <div class="calendarPicker"> <div class="pick-date"> <h1>Pick a Date: </h1> <input type="date" id="calendar" name="calendar" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> </div> <input type="text" id="selectedVerseRefTag" value=""><br><br> <textarea id="selectedVerse" value="Text area"></textarea> <h2 class="quote"> Selected date area: <span id="selectedDate"></span></h2> </div>