カレンダーの日付を選択してリンクのラベルを更新してください

Question

私は自分のページにリンクラベルを持っています。ラベルをクリックすると、カレンダーがポップアップします。カレンダーの日付をクリックすると、リンクラベルをこの特定の日付にこの形式で更新するようにします。'30 JAN 2017 '

ローカル変数var dateText =...が原因です。マイラベルは更新されませんが正しいフォーマット。

私のラベルは正しい日付に更新されますが、私が探しているフォーマットは含まれていません。

カレンダーの特定の日付をクリックすると、リンクラベルを目的のフォーマットに更新するにはどうすればよいですか？

$(document).ready(function() { 
 

 
    $("#dp").datepicker({ 
 
    onSelect: function(dateText, inst) { 
 

 
     var dateText = new Date().toLocaleString('en-GB', { 
 
     day: 'numeric', 
 
     month: 'short', 
 
     year: 'numeric' 
 
     }).split(' ').join(' '); 
 

 
     $("#datep").html(dateText); 
 
    }, 
 
    beforeShow: function(event, ui) { 
 
     var $link = $("#datep"); 
 
     ui.dpDiv.offset({ 
 
     top: $link.offset().top + 10, 
 
     left: $link.offset().left + 10 
 
     }); 
 
    } 
 
    }); 
 

 
    $("#datep").click(function() { 
 
    $("#dp").datepicker("show"); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<a href="#" id="datep">Date Picker Link Label</a> 
 
<input type="hidden" id="dp" /> 
 
<div></div>

Answer 1

あなたは、現在の日付を使用する、new Date().toLocaleString(...を呼んでいます。あなたが不足しているすべては、DateコンストラクタにdateTextパラメータを渡している。

$(document).ready(function() { 
 

 
    $("#dp").datepicker({ 
 
    onSelect: function(dateText, inst) { 
 

 
     var dateText = new Date(dateText).toLocaleString('en-GB', { 
 
     day: 'numeric', 
 
     month: 'short', 
 
     year: 'numeric' 
 
     }).split(' ').join(' '); 
 

 
     $("#datep").html(dateText); 
 
    }, 
 
    beforeShow: function(event, ui) { 
 
     var $link = $("#datep"); 
 
     ui.dpDiv.offset({ 
 
     top: $link.offset().top + 10, 
 
     left: $link.offset().left + 10 
 
     }); 
 
    } 
 
    }); 
 

 
    $("#datep").click(function() { 
 
    $("#dp").datepicker("show"); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<a href="#" id="datep">Date Picker Link Label</a> 
 
<input type="hidden" id="dp" /> 
 
<div></div>