Question

<!DOCTYPE>
<html><head><title>Date BootStrap Code</title>
    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    </head>
<body>

    
     <div class="row">
    <div class='col-sm-3'>
      <div class="form-group">
        <div class='input-group date'>
          <input type='text' class="form-control" />
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
    
    <script>
    $(function() {
  var bindDatePicker = function() {
    $(".date")
      .datetimepicker({
        format: "MM-YYYY",
        icons: {
          time: "fa fa-clock-o",
          date: "fa fa-calendar",
          up: "fa fa-arrow-up",
          down: "fa fa-arrow-down"
        }
      })
      .find("input:first")
      .on("blur", function() {
       /*check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.*/
        /* update the format if it's yyyy-mm-dd*/
        var date = parseDate($(this).val());

        if (!isValidDate(date)) {
          /*create date based on momentjs (we have that)*/
          date = moment().format("MM-YYYY");
        }

        $(this).val(date);
      });
  };

  var isValidDate = function(value, format) {
    format = format || false;
    /* lets parse the date to the best of our knowledge*/
    if (format) {
      value = parseDate(value);
    }

    var timestamp = Date.parse(value);

    return isNaN(timestamp) == false;
  };

  var parseDate = function(value) {
    var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
    if (m)
      value =
        m[5] + "-" + ("00" + m[3]).slice(-2) + "-" + ("00" + m[1]).slice(-2);

    return value;
  };

  bindDatePicker();
});

    </script>
    </body>
</html>

我只需要以文本格式显示月份。现在只有我能以数字格式看到月份。

 <!DOCTYPE> <html><head><title>Date BootStrap Code</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> </head> <body> <div class="row"> <div class='col-sm-3'> <div class="form-group"> <div class='input-group date'> <input type='text' class="form-control" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <script> $(function() { var bindDatePicker = function() { $(".date") .datetimepicker({ format: "MM-YYYY", icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down" } }) .find("input:first") .on("blur", function() { // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd. // update the format if it's yyyy-mm-dd var date = parseDate($(this).val()); if (!isValidDate(date)) { //create date based on momentjs (we have that) date = moment().format("MM-YYYY"); } $(this).val(date); }); }; var isValidDate = function(value, format) { format = format || false; // lets parse the date to the best of our knowledge if (format) { value = parseDate(value); } var timestamp = Date.parse(value); return isNaN(timestamp) == false; }; var parseDate = function(value) { var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/); if (m) value = m[5] + "-" + ("00" + m[3]).slice(-2) + "-" + ("00" + m[1]).slice(-2); return value; }; bindDatePicker(); }); </script> </body> </html>

Answer 1

将日期选择器中的格式更改为“ MMM-YYYY”格式，它使用moment.js格式。

  $(".date").datetimepicker({
                    format: "MMM-YYYY",
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-arrow-up",
                        down: "fa fa-arrow-down"
                    }
                })

引导日期选择器仅以字符格式和年份显示月份

1 个答案: