Question

我需要更新我的日期选择器＆＃39;日期格式（mm.dd.yyyy等）使用选择框。

我目前正在使用Eyecon的Bootstrap Datepicker，因为它具有我能找到的最小文件大小（8k缩小），并包含我需要的日期格式。我还尝试在其他几个日期选择器中触发日期格式更改，但没有任何成功。

是否有明显的方法可以触发从选择框到日期选择器的更改？

//date format
var dateFormat = $('#custom_date_format').val() || "mm/dd/yyyy";
$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
});

//start and end dates
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('.j-start-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    //return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate());
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('.j-end-date')[0].focus();
}).data('datepicker');

var checkout = $('.j-end-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');

Answer 1

您可以通过$('.selector').data('datepicker')访问Datepicker对象，这样您就可以更改其内部选项，例如format。在您的情况下，只是separator正在发生变化，因此您可以执行以下操作：

HTML ，附加data-separator提示：

<select id="custom_date_format">
    <option value="mm/dd/yyyy" data-separator="/">mm/dd/yyyy</option>
    <option value="mm-dd-yyyy" data-separator="-">mm-dd-yyyy</option>
    <option value="mm.dd.yyyy" data-separator="." selected>mm.dd.yyyy</option>
</select>

JQuery 更新格式更改时的datepicker分隔符：

$('#custom_date_format').change(function() {      
    $('.j-start-date').data('datepicker').format.separator = $(':selected', this).data('separator');
    $('.j-end-date').data('datepicker').format.separator = $(':selected', this).data('separator');
});

See the dynamic format separator datepicker fiddle here.

_{（请注意，小提琴仍然需要一些增强功能才能获得最佳的实时用户体验）}

Answer 2

虽然之前我没有亲自使用Eyecon Bootstrap Datepicker，但我能够处理一个解决方案，该解决方案既处理了更改格式要求，又根据更改的开始日期禁用了结束日期值（问题＃2来自你的jsFiddle）。

这样做需要使用修补版本的Eyecon插件，但要合并this custom function（感谢@Djomla）并且还要利用更新版本的插件，即{ {3}}

所有这一切，这里是你的小提琴的一些关键变化，利用我描述的上述更新......

处理日期格式更改：

$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
    $('.j-start-date, .j-end-date').datepicker('setFormat',dateFormat);
    if($('.j-start-date').val() != '')
        $('.j-start-date').datepicker('update',new Date(checkin.date.valueOf()));
    if($('.j-end-date').val() != '')
        $('.j-end-date').datepicker('update',new Date(checkout.date.valueOf()));
});

这个更新的更改处理程序做了两件事;首先，它利用添加到插件的setFormat方法。其次，只有当datepicker中已有值时，它才会使用update方法将值设置为当前值（这是为了确保用户在UI中看到的日期采用更新的格式）

更新了开始日期的.on()处理程序：

.on('changeDate', function(ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var DayAfterCheckin = AddOneDay(ev.date);
        $('.j-end-date').datepicker('update',DayAfterCheckin);
    }
    checkin.hide();
    $('.j-end-date')[0].focus();
});

此更新可确保将结束日期（如果当前位于开始日期之前）设置为所选开始日期之后的第二天。如果结束日期已晚于开始日期，则它将保持不变。

更新了结束日期的.on()处理程序：

.on('show', function(ev) {
    var DayAfterCheckin = AddOneDay(checkin.date.valueOf());
    $('.j-end-date').datepicker('setStartDate',DayAfterCheckin);
});

此更新确保用户无法通过重置StartDate选项来选择开始日期之前的结束日期。

更新了jsFiddle，与您分道：this fork here

补充说明，更新后的插件确实支持内联选项（您的问题＃3）但是它似乎存在一个问题，它为适用于禁用日期的CSS应用了。我离开（注释掉）标记来尝试内联设计;上面描述的所有逻辑仍然可以在内联模式下工作，但无论出于何种原因，CSS都不会应用于结束日期日历中的禁用日期。因此，当您仍然无法在开始日期之前选择结束日期时，UI不会使限制日期变灰。如果您对使用更新的插件感兴趣，我只是将其作为GitHub回购中的一个问题发布给开发人员，以便查看＆amp;地址。

希望这有帮助！

eyecon的Bootstrap Datepicker中的动态日期格式

2 个答案: