Django - 如何使日期选择器在更改时提交表单

Posted 2023-02-24

【中文标题】Django - 如何使日期选择器在更改时提交表单

【英文标题】：Django - How to make datepicker submit form on change

【发布时间】：2014-08-10 19:14:56

【问题描述】：

所以我的html中有这个jQuery datepicker，如下图：

<form id="form" method="get" action=".">
    ...
    <input class="form-control" type="text" value=" range " name="range"
    placeholder="Date range" id="daterange"><b class="caret"></b></input>
</form>

还有这个制作日期选择器的 javascript 函数：

$(document).ready(function() 
   $("#daterange").daterangepicker(
    ranges: 
     "Today": [new Date(), new Date()],
     "Yesterday": [moment().subtract("days", 1), moment().subtract("days", 1)],
     "Last Week": [moment().subtract("days", 6), new Date()],
     "Last 30 Days": [moment().subtract("days", 29), new Date()],
     "This Month": [moment().startOf("month"), moment().endOf("month")],
     "Last Month": [moment().subtract("month", 1).startOf("month"), moment().subtract("month", 1).endOf("month")],
     "Max": [moment("Jan 1, 2014"), new Date()],
    ,
    opens: "right",
    onSelect: function(date, instance) 
      alert('test');
    ,
    format: "YYYY-MM-DD",
    startDate: new Date(),
    endDate: new Date(),
    ,
    function(start, end) 
     $("#daterange span").html(start.format("MMM D, YYYY") + " - " + end.format("MMM D, YYYY"));
    
   );
  );

当 datepicker 值改变时如何自动提交表单？

顺便说一句：我试过 onchange="" 和 onSelect: function ，都不起作用。

【参考方案1】：

form.html

<form id="form_id" method="get" action=".">
...
<input class="form-control" type="text" value=" range " name="range"
placeholder="Date range" id="daterange"><b class="caret"></b></input>
</form>

检查一下它应该可以工作，

 $(document).ready(function() 
 $("#daterange").daterangepicker(
  ranges: ,
  opens: "right",
  onSelect: function() ,//remove this one
  function(start, end) ,
  onChange: function() $("#form_id").submit(); //add this line
 );

【讨论】：

如果我将它添加到我的日期范围选择器中，它就会停止工作：日期选择器甚至不再出现。

【参考方案2】：

$(document).ready(function() 
     alert();
 $("#daterange").daterangepicker(
  ranges: ,enter code here
  opens: "right",
  onSelect: function() ,//remove this one
  function(start, end) ,
  onChange: function() $("#form_id").submit(); //add this line
 );
  );//Add this to work this by RUMIT

【讨论】：

SO 不鼓励仅使用代码的答案。请解释您认为错误的地方以及如何解决。

在前面的代码最后一行丢失，发生 java 脚本停止显示日历。函数未正确关闭。

请编辑您的答案，以便从答案本身中清楚地知道问题是什么以及解决方案应该是什么。

而且，顺便问一下，你的回答与上面@hari 的回答有何不同？它会带来任何额外的价值吗？