Question

我有内联jQuery UI DatePicker，需要自定义输出日期的格式和外观，代码：

<div id="date-start"></div>
<div class="date start" id="date-start-output"></div>

$(function(){
    // Datepicker
    $('#date-start').datepicker({
        inline:true,            
        showOtherMonths: true,
        altField: "#date-start-value",
        altFormat: "dd M yy",
        dateFormat: "dd M yy",
        onSelect: function(){
            var day1 = $("#date-start").datepicker('getDate').getDate();                 
            var month1 = $("#date-start").datepicker('getDate').getMonth() + 1;             
            var year1 = $("#date-start").datepicker('getDate').getFullYear();               
            var str_output = "<b>" + day1 + "</b><span>" + month1 + "<br />" + year1 + "</span>";
            $('#date-start-output').html(str_output);
        }

    }); 

});

它有效，但是在＃date-start-output中我的日期格式不是“dd M yy”而是“dd m yy”。如何为月份设置必要的输出格式？另外我需要在页面加载后显示#date-start-output当前日期，我正在尝试“beforeShow”事件，但它不能与“onSelect”事件一起使用。

感谢。

Answer 1

onSelect事件处理程序第一个参数是选定的日期作为文本。我猜它会在初始化期间按照指定格式化

请参阅http://jqueryui.com/demos/datepicker/#event-onSelect

$(function(){
    // Datepicker
    $('#date-start').datepicker({
        inline:true,            
        showOtherMonths: true,
        altField: "#date-start-value",
        altFormat: "dd M yy",
        dateFormat: "dd M yy",
        onSelect: function(dateText){
            $('#date-start-output').html(dateText);
        }
    }); 
});

如果您需要特殊格式，可以尝试：

$(function(){
    // Datepicker
    $('#date-start').datepicker({
        ...
        onSelect: function(){
            var dateText = $.datepicker.formatDate("<b>dd</b><span>M<br />yy</span>", $(this).datepicker("getDate"));
            $('#date-start-output').html(dateText);
        }
    }); 
});

不确定它是否适用于HTML标记

jQuery UI DatePicker输出日期格式

1 个答案: