如何仅使用日期选择器获取日期的月份和年份

时间:2018-10-06 14:52:51

标签: javascript jquery html css

伙计们,我怎样才能仅通过日期选择器获得月份和年份

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <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>
  <script>
  $(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        var date = $(this).datepicker("getDate");
        $("#placeholder").text(date);
    });
});
  </script>

</head>
<body>
 <p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>

</body>
</html>

这是上面代码的输出

在此处获取代码

http://jqueryui.com/datepicker/

enter image description here

2 个答案:

答案 0 :(得分:2)

可以使用getDate来做到这一点,但是我认为使用dataFormat选项会更容易,而只需使用.val()来获取datepicker吐出的值< / p>

选项1
在这里,我正在设置日期选择器的格式,获取该值,然后将其恢复为默认格式。

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        var date = $(this).datepicker('option', 'dateFormat', 'MM dd, yy').val();
        $("#placeholder").text(date);
        $(this).datepicker('option', 'dateFormat', 'mm/dd/yy')
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>

选项2 (来源:How to format a JavaScript date

这种方法只是格式化getData方法返回的日期。

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        function formatDate(date) {
          var monthNames = [
            "January", "February", "March",
            "April", "May", "June", "July",
            "August", "September", "October",
            "November", "December"
          ];

          var day = ("0" + date.getDate()).slice(-2);
          var monthIndex = date.getMonth();
          var year = date.getFullYear();

          return monthNames[monthIndex] + ' ' + day + ', ' + year;
        }
    
        var date = formatDate(new Date($(this).datepicker("getDate")));
        
        $("#placeholder").text(date);
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<p>Date: <input type="text" id="datepicker"/></p>
<div id="placeholder"></div>

答案 1 :(得分:0)

阅读插件的文档:http://api.jqueryui.com/datepicker/