将日期从datepicker分配到按钮作为jquery post的数据id属性

Question

我目前被卡住了。我想将2 datepicker中的2个日期分配为data-date1和data-date2属性至button。然后点击那个按钮，它会做一个post调用来检查数据库与数据属性的值。

ajax的php片断不是我的问题，更像是如何获取数据访问器值？

下面是到目前为止我的代码，这里是一个fiddle

`

$('#date1').on('changeDate', function(a) { 
 
var Date1 = $('#date1').val(); 
 
var Date2 = $('#date2').val(); 
 
$('#button').attr('data-date1', Date1); 
 
$('#button').attr('data-date2', Date2); 
 
}); 
 
}); 
 

 
$(document).on("click", "#button", function() { 
 
    var d1 = $(this).data('date1'); 
 
    var d2 = $(this).data('date2'); 
 
    $.post('phpurl.php/controller', { 
 
    d1, 
 
    d2 
 
    }, function() { /* do something */ }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label>Date 1</label> 
 
    <input class="form-control" type="datetime-local" id="date1"> 
 
</div> 
 
<div> 
 
    <label>Date 2</label> 
 
    <input class="form-control" type="datetime-local" id="date2"> 
 
</div>

`

Answer 1

试试这个代码

您可以轻松地使用change事件

$('#date1').on('change, blur', function(a) { 
var Date1 = $(this).val(); 
$('#button').attr('data-date1', Date1); 
}); 
$('#date2').on('change, blur', function(a) { 
var Date2 = $(this).val(); 
$('#button').attr('data-date2', Date2); 
}); 

$('#date1').on('change, blur', function(a) { 
 
var Date1 = $(this).val(); 
 
alert(Date1); 
 
$('#button').attr('data-date1', Date1); 
 
}); 
 
$('#date2').on('change, blur', function(a) { 
 
var Date2 = $(this).val(); 
 
alert(Date2); 
 
$('#button').attr('data-date2', Date2); 
 
}); 
 

 
$(document).on("click", "#button", function() { 
 
    var d1 = $(this).data('date1'); 
 
    var d2 = $(this).data('date2'); 
 
    $.post('phpurl.php/controller', { 
 
    d1, 
 
    d2 
 
    }, function() { /* do something */ }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <label>Date 1</label> 
 
    <input class="form-control" type="datetime-local" id="date1"> 
 
</div> 
 
<div> 
 
    <label>Date 2</label> 
 
    <input class="form-control" type="datetime-local" id="date2"> 
 
</div> 
 
<button id="button">button</button>