jQuery Datepicker中的自定義文本

Question

使用jQuery從datepicker中選擇之后，我必須在輸入框中顯示日期。 我使用了以下代碼：

$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM' });
    $.datepicker.formatDate('yy-mm-dd');
});

我可以使用以下格式獲取日期：“ 8月9日星期五”。 但是我的要求是：8月9日星期五（今天）

這是要處理的JS小提琴： http : //jsfiddle.net/4cgPe/

知道我該如何實現嗎？

Answer 1

完整的源代碼如下，適用於不同類型的格式：

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Format date</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
        $( "#format" ).change(function() {
            $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
        });
    });
    </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30" /></p>

<p>Format options:<br />
    <select id="format">
        <option value="mm/dd/yy">Default - mm/dd/yy</option>
        <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
        <option value="d M, y">Short - d M, y</option>
        <option value="d MM, y">Medium - d MM, y</option>
        <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
        <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
    </select>
</p>


</body>
</html>

有關格式的更多信息，請參見此鏈接

Answer 2

我找不到關於向jQuery添加自定義文本的更多信息，所以我想出了自己的JavaScript。 我基於您的DatePicker代碼。

（據我了解，如果選擇的日期是今天，則添加“（今天）”，或者，如果選擇的日期是明天，則添加“（明天）”，或者其他日期不添加任何內容。

<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM yy' });
    $.datepicker.formatDate('yy-mm-dd');
});

function updateDate(){
    var inputDate=document.getElementById('datepicker').value; 
    var selectedDate=new Date(inputDate);
    var today=new Date();
    var tomorrow=new Date();
    tomorrow.setDate(today.getDate()+1);
    selectedDate.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    tomorrow.setHours(0,0,0,0);
    var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
    var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
    var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
    var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
    var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
    if(selectedDate.getTime() == today.getTime()){

        document.getElementById('datepicker').value=finalDate+" (Today)";
    }
    else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
    else {document.getElementById('datepicker').value=finalDate;}
}

</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>

編輯：

附加功能：可能需要使用“整日/月”名稱或“短日/月”名稱，因此您可以相應地使用陣列。

DaysFull ：星期日，星期一等

DaysHalf ： 星期日 ，星期一等

滿月：一月，二月等

半月：1月，2月等

希望這可以幫助。 讓我知道這是否還不夠。 :)

jQuery Datepicker中的自定義文本

問題描述

2 個解決方案

解決方案1
0 2013-08-09 11:45:12

解決方案2
0 已采納 2013-08-09 20:40:16

jQuery Datepicker中的自定義文本

問題描述

2 個解決方案

解決方案1 0 2013-08-09 11:45:12

解決方案2 0 已采納 2013-08-09 20:40:16

解決方案1
0 2013-08-09 11:45:12

解決方案2
0 已采納 2013-08-09 20:40:16