2

我正在尝试制作一个日期选择器，它将为实现了 html5 规范的浏览器运行，并为那些没有实现的浏览器提供一个 jquery ui 日期选择器。

到目前为止，我有：

<input type="date" id="TargetDate1" name="TargetDate1" class="date" value="2013-06-29" min="2013-06-26" max="2016-06-26" required="required" autocomplete="off">

它在 Chrome27 中运行良好，提供本机 html5 控件，并在选择之前和之后以英国格式 dd/mm/yyyy 正确格式化日期。我正在使用以下 jquery 来提供 jquery ui 日期选择器：

 if (Modernizr.inputtypes.date === false) {
     $('.date').datepicker({
         changeMonth: true,
         changeYear: true,
         minDate: 0,
         maxDate: "+3Y"
     }).prop("min", "").prop("max", "");
 }

我还使用了以下国际化文件来格式化日期，并尝试在上面指定 dateFormat: 'dd/mm/yy' 。

/*global jQuery */

/* English/UK initialisation for the jQuery UI date picker plugin. */
/* Written by Stuart. */
jQuery(function ($) {
     $.datepicker.regional['en-GB'] = {
          closeText: 'Done',
          prevText: 'Prev',
          nextText: 'Next',
          currentText: 'Today',
          monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
          monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',         
    'Friday',     'Saturday'],
          dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
          weekHeader: 'Wk',
          dateFormat: 'dd/mm/yy',
          firstDay: 1,
          isRTL: false,
          showMonthAfterYear: false,
          yearSuffix: ''
     };
     $.datepicker.setDefaults($.datepicker.regional['en-GB']);
});

在非 html5 浏览器中，当用户使用 Jquery UI 日期选择器选择日期（例如在 FF22 中）时，它会以正确的格式提供日期：dd/mm/yyyy 到表单。问题是最初加载表单时，日期格式为 yyyy-mm-dd 格式，这是不正确的。

是否有让 jquery 或其他方法为所有场景正确格式化日期？

我还注意到，通过将 min="2013-06-26" max="2016-06-26" 指定为 FF，它不会让我保存数据，除非它再次采用 yyyy-mm-dd 格式。因此，在上面的 jquery 中它会将其空白。如果有人有办法在 jquery 中使用 html5 标记，或者不必清除最小值/最大值，那将很有用。谢谢

4

1 回答 1

0

根据您的评论，您需要为不受支持的浏览器设置 dd/mm/yyyy 日期格式。

如果这是正确的，请尝试以下一项。

$(document).ready(function () {
    if (Modernizr.inputtypes.date === false) {
        var date = new Date($('#TargetDate1').val());
        $('#TargetDate1').val(("0" + date.getDate()).slice(-2) + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date.getFullYear());
        $('.date').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: 0,
            maxDate: "+3Y"
        }).prop("min", "").prop("max", "");
    }
});

要更改日期格式，您需要这样做：

var date = new Date($('#TargetDate1').val());
$('#TargetDate1').val(("0" + date.getDate()).slice(-2) + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date.getFullYear());

JSFiddle中的演示

于 2013-06-26T12:15:12.947 回答