0

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

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

小提琴：http: //jsfiddle.net/Yshy7/8/

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

//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');
4

3 回答 3

2

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


带有附加data-separator提示的HTML ：

<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在格式更改时更新日期选择器分隔符：

$('#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');
});


请参阅此处的动态格式分隔符 datepicker fiddle。

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

于 2014-06-12T15:06:18.323 回答
2

虽然我以前没有亲自使用过 Eyecon Bootstrap Datepicker，但我能够制定一个解决方案，既可以处理更改格式要求，也可以根据更改的开始日期禁用结束日期值（来自您的 jsFiddle 的问题 #2） .

这样做需要使用 Eyecon 插件的补丁版本，但要合并此自定义功能（感谢 @Djomla）并利用更新版本的插件，即此处的这个 fork。

话虽如此，这里是您的小提琴的一些关键变化，利用我描述的上述更新......

处理日期格式更改：

$('#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，从你的分支：http: //jsfiddle.net/8fpEV/

补充说明一下，更新后的插件确实支持内联选项（您的问题 #3），但它似乎存在问题，将正确的 CSS 应用于禁用日期。我留下（注释掉）标记以尝试内联设计；上述所有逻辑仍然在内联模式下工作，但无论出于何种原因，CSS 都不适用于结束日期日历中的禁用日期。因此，虽然您仍然无法选择开始日期之前的结束日期，但 UI 不会灰显受限日期。如果您对使用更新的插件感兴趣，我只需将其作为一个问题发布在其 GitHub 存储库中，供开发人员查看和解决。

希望这可以帮助！

于 2014-06-12T15:21:28.683 回答
0

尽管这不是一个明显的解决方案，但要使用 Eyecon 的 Bootstrap Datepicker 完全支持动态格式更改（包括国际化格式，如dd-mm-yyyy），您需要更改其脚本以使外部世界可以访问内部DPGlobal变量，因为使用 Eternicode 的 Bootstrap Datepicker 完成。

要实现它，您可以手动将以下行添加到 datepicker 的未缩小的 .js 中：

$.fn.datepicker.DPGlobal = DPGlobal; //place it after the DPGlobal initialization

您现在可以压缩 .js（使用任何已知的在线压缩工具）并在您的项目中使用它并获得完整的支持。

使用更新后的 .js 文件，您将能够使用以下代码执行您想要的操作：

$('#custom_date_format').change(function() {
    //use parseFormat function from the now exposed DPGlobal variable
    var newFormat = $.fn.datepicker.DPGlobal.parseFormat($(this).val());

    //update each datepicker internal format
    $('.j-start-date').data('datepicker').format = newFormat;
    $('.j-end-date').data('datepicker').format = newFormat;

    //refresh each datepicker showing date
    if ($('.j-start-date').prop("value") != "") {
        $('.j-start-date').data('datepicker').set();
    }
    if ($('.j-end-date').prop("value") != "") {
        $('.j-end-date').data('datepicker').set();
    }
});

编辑您的答案以包括更新的工作小提琴-非常感谢，OP。

于 2014-06-13T21:22:24.923 回答