jQuery datepicker beforeShow 日期格式的问题

Question

我已经集成了 jQuery datepicker，我想要在 datepicker 文本框中的日期格式是 e.g. “Fri, Aug 4”，一切正常。

问题：当我在文本框中打开带有日期（“Fri Aug 4”）的日历时，该日期在日历中突出显示，但日历文本框中的日期格式更改为“08/04/2017” .

我总是希望在任何情况下都以我自己的格式在文本框中显示日期，但这并没有发生。我有“onSelect”功能，它格式化所选日期并在文本框中正确显示。问题是日历何时打开。下面是我的“beforeShow”代码。有人可以帮我解决这个问题吗？

$("#exercise_date").datepicker({
    beforeShow: function(input, inst) {              
        var objStartDate = new Date( $("#exercise_date").data("selectedDate") );
        var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
        $("#exercise_date").val( customFormatDateStr );
        $(this).datepicker("setDate", new Date($("#exercise_date").data("selectedDate")));              
    },
    enableOnReadonly: true,
    minDate: new Date( '2017-06-01T08:30:00Z' ),
    maxDate: new Date(),
    autoclose: true,
    hideIfNoPrevNext: true,
    onSelect: function(selectedDate){
        var displayDateObj = new Date( selectedDate );
        var customFormatDateStr = dayName[displayDateObj.getDay()]+", "+months[displayDateObj.getMonth()]+" "+displayDateObj.getDate();
        $("#exercise_date").val(customFormatDateStr);
        $("#exercise_date").data("selectedDate",selectedDate);
    },
    onClose: function(input, inst) {
        var objStartDate = new Date( $(this).data("selectedDate") );
        var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
        $("#exercise_date").val( customFormatDateStr );
    }
});

Answer 1

试试这个代码

在您的代码中添加dateFormat 选项

dateFormat: 'D, M dd'

---

• D : 天
• M：月
• dd：日期

$(function(){
var today = "08/11/2017";
var objStartDate = new Date( today );
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var dayName = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
$("#exercise_date").val( customFormatDateStr );
$("#exercise_date").data("selectedDate",today);
$("#exercise_date").datepicker({
          beforeShow: function(input, inst) {              
              var objStartDate = new Date( $("#exercise_date").data("selectedDate") );
              var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
              $("#exercise_date").val( customFormatDateStr );
              $(this).datepicker("setDate", new Date($("#exercise_date").data("selectedDate")));              
          },
          enableOnReadonly: true,
          minDate: new Date( '2017-06-01T08:30:00Z' ),
          maxDate: new Date(),
          autoclose: true,
          dateFormat: 'D, M dd',
          hideIfNoPrevNext: true,
          onSelect: function(selectedDate){
            var displayDateObj = new Date( selectedDate );
            var customFormatDateStr = dayName[displayDateObj.getDay()]+", "+months[displayDateObj.getMonth()]+" "+displayDateObj.getDate();
            $("#exercise_date").val(customFormatDateStr);
            $("#exercise_date").data("selectedDate",selectedDate);
          },
          onClose: function(input, inst) {
            var objStartDate = new Date( $(this).data("selectedDate") );
            var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
            $("#exercise_date").val( customFormatDateStr );
          },
        });
});

$(".ui-datepicker").css("font-size", 13);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css">
Date : <input id="exercise_date" type="text" data-selectedDate="" />