Question

我有点卡在这里。我的应用程序是一个非移动数据库的前端，我需要以“我自己的方式”设置格式的日期字段，即“ 2020年1月20日”，并附带一个日期选择器。

我无法获得// by name <textarea name="comment"></textarea> let text_area_data = $('textarea[name="comment"]').val(); // by id <textarea id="comment" name="comment"></textarea> let text_area_data = $('textarea#comment').val();元素来格式化日期值（还是可以？）
选择器本身还可以，但是我找不到从Javascript打开它的可靠方法（或者可以吗？）。想法是使用隐藏的日期输入，并在普通文本输入中显示格式化的值。然后从按钮调用隐藏输入的选择器。
我一直在寻找一些自定义选择器，但是我发现这些选择器要么是为移动设备设计的（太大），要么需要jscript / jquery（我对此一无所知），无法格式化日期，之一（或有没有？），或覆盖字体尾部其余样式。

建议。

Answer 1

输入类型时，您需要记住将其放在这样的表单标签中，

   <form action="/action_page.php">
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday">
      <input type="submit">
   </form>

希望这对您有帮助

Answer 2

您可以使用jQuery UI datepicker。它提供了精心设计的datePicker，还提供了许多选项和事件。

尝试下面的代码。

var currentDate = new Date();
var monthNames = ["January", "February", "March", "April", "May", "June",
     "July", "August", "September", "October", "November", "December"
];
    
$(document).ready(function() {
    $("#datInput").val(formatDate(currentDate))
    
    $( "#hiddenDatePicker").datepicker({
      showOn: "button",
      buttonText: "day",
      onSelect: function(dateText, inst) {
         var formattedDate = formatDate(new Date(dateText));
         $("#datInput").val(formattedDate);
      }
    });
    
 });
    
function formatDate(dt) {
   var day = dt.getDate();
   var month = monthNames[dt.getMonth()];
   var year = dt.getFullYear();
   
   return day + '-' + month + '-' + year;

}

#hiddenDatePicker{
    display: none;
}

<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>


<input type="input" id="hiddenDatePicker" class="datepicker" />
<input type="text" id="datInput"/>

日期选择器和自定义显示格式

2 个答案: