JQuery UI Datepicker |从弹出窗口输出输入日期字段中的选定日期

Question

这是挑战：

1）[完成]需要使用激活模态的选择日期按钮禁用输入日期字段 2）[完成]当用户单击选择日期时，JQuery Datepicker需要以模态显示 3）[完成] JQuery Datepicker需要禁用周末和美国公共假期日期选择
4）[完成]在用户使用JQuery Datepicker选择日期之前，需要禁用保存按钮 5）[未完成]当用户点击保存按钮时，需要关闭选择日期模式，并且需要在输入日期字段中填充所选日期，该字段仍将显示为禁用模式。

---

以下是输入表单：

有关如何从showDate（）创建日期值的任何想法都出现在输入字段中？

<form>
  <label for="choose-date">
    <input type="text" id="choose-date" disabled onchange="showDate()">
    <button href="#" data-reveal-id="choose-date-modal">Choose Date</button>
  </label>
</form>

这里是Datepicker出现的弹出窗口（Foundation Reveal Modal）：

<div id="choose-date-modal" class="reveal-modal" data-reveal>
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>

  <div id="datepicker-control"></div>

  <ul class="inline-list button-list">
    <li><a href="#" class="save-date-button primary button radius disabled close-reveal-modal">Save</a></li>
    <li><a href="#" class="secondary button radius close-reveal-modal">Cancel</a></li>
  </ul>

  <a class="close-reveal-modal">&#215;</a>
</div>

以下是禁用周末和美国公众假期日期选择的jQuery Datepicker：

/* Array of disabled public US holidays */
var disabledDays = [
    "1-1-2014",
    "1-20-2014",
    "2-17-2014",
    "2-28-2014",
    "5-26-2014",
    "7-4-2014",
    "9-1-2014",
    "10-13-2014",
    "11-11-2014",
    "11-27-2014",
    "12-25-2014"
];

/* utility function */
function nationalDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    // console.log('Checking (raw): ' + m + '-' + d + '-' + y);
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            // console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
            return [false];
        }
    }
    // console.log('good:  ' + (m+1) + '-' + d + '-' + y);
    return [true];
}
function noWeekendsOrHolidays(date) {
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? nationalDays(date) : noWeekend;
}


$(document).ready(function() {
  $("#datepicker-control").datepicker({ 
    minDate: new Date(2014, 0, 1), 
    maxDate: new Date(2014, 11, 31),
    dateFormat: "mm-dd-yy",
        constrainInput: true,
        beforeShowDay: noWeekendsOrHolidays,
        onSelect: function showDate(date) {
            $('.save-date-button').removeClass('disabled');
            // console.log(date);
            return date;
        }
  });
});