Question

我已经集成了jQuery datepicker，我希望在datepicker文本框中的日期格式是例如＆＃34;星期五，8月4日和＃34;，这一切都在发挥作用。

问题：当我在文本框中打开包含日期（＆＃34; 8月4日星期四＆＃34;）的日历时，此日期会在日历中突出显示，但日历文本框中的日期格式会更改为＆＃ 34; 08/04/2017＆＃34;

我总是希望在任何上下文中的文本框中以我自己的格式显示日期，但这并没有发生。我有＆＃34; onSelect＆＃34;格式化所选日期并在文本框中正确显示的函数。问题是日历何时打开。以下是我的＆＃34; beforeShow＆＃34;码。有人可以帮我解决这个问题吗？

$("#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：Day
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="" />

jQuery datepicker beforeShow日期格式的问题

1 个答案: