jQuery - 从字段中获取的 jQuery 数组中获取值

Question

首先我有一个带有daterangepicker 的字段。

我使用$("#field").val() 获得价值。

我喜欢

{"start":"2018-03-23","end":"2018-03-29"}

但是，我需要来自

的开始日期和结束日期值

{"start":"2018-03-23","end":"2018-03-29"}

我的代码是

<input id="field" type="text" value='' /><br/>

$(function() {
  'use strict';
   $("#field").daterangepicker({
       dateFormat:'dd M',
       datepickerOptions : {
        numberOfMonths : 2
     }
   });
   var curnt = moment().startOf('day').toDate();
  var weeks = moment().subtract('days', 6).startOf('day').toDate();
  $("#field").daterangepicker("setRange", {start: weeks, end: curnt});
 });

function get_graph_data(){

  var dates = JSON.parse($("#field").val());
  console.log(dates.start);
  console.log(dates.end);

  var data = {
    'action'  : 'example_ajax_request',
    'wp_graph': $("#field").val()
  };

  jQuery.post(ajax_url, data, function(response) {
    alert('Got this from the server: ' + response);
  });
}

Answer 1

您从 $("#field").val() 得到的是 JSON。您可以轻松地执行以下操作：

var dates = JSON.parse($("#field").val());
dates.start; // "2018-03-23"
dates.end;   // "2018-03-29"

一个帮助你的 sn-p：

$(function () {
  var dates = JSON.parse($("#field").val());
  console.log(dates.start); // "2018-03-23"
  console.log(dates.end);   // "2018-03-29"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field" type="hidden" value='{"start":"2018-03-23","end":"2018-03-29"}' />

Answer 2

您正在使用daterangepicker 插件，因此您应该使用它的方法而不是jQuery 的val()。选择一个输入字段并致电data('daterangepicker')。返回的对象包含 startDate 和 endDate 对象。请记住，它们是日期对象（不是字符串），因此如果要打印它们，则需要格式化。

$('#field').daterangepicker({
  locale: {
    format: 'YYYY-MM-DD'
  },
  startDate: '2018-01-01',
  endDate: '2018-12-31'
});

$("#getDateRange").click(function() {
  var data = $("#field").data('daterangepicker');
  var startDate = data.startDate.format('YYYY-MM-DD');
  var endDate = data.endDate.format('YYYY-MM-DD');
  alert('Start date: ' + startDate + ', end date: ' + endDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input id="field" type="text" value='' />
<button type="button" id="getDateRange">Get start date</button>

查看插件的官方文档总是一个好习惯。您可以查看here。