javascript - 使用 DatePicker(仅月日，无年份)、Moment.js 和 JSON 来填充事件或报价

Question

这里是个极端新手，但我正在尽快学习；掌握 JavaScript、HTML、CSS。不过，这些特殊的东西却超出了我的想象。 (请友善......尝试到达那里)

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

年份并不重要，所以最好不要使用它。

我在跨平台移动应用程序上使用 jQuery 和 moment.js(不过是通过 iOS 启动的)。希望phonegap能让我免受更多成长的烦恼。

我搜索了论坛并浏览了 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>

datepicker calendar scroll image

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>