Question

我有两个日期选择器：

 <div class='input-group date datepicker1'>
       <input  data-format="dd/mm/yyyy" name="startDate" placeholder="DD/MM/YYYY" type='text' class="form-control" required/>
           <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
           </span>
 </div>

<div class='input-group date datepicker2'>
        <input  data-format="dd/mm/yyyy" name="endDate" placeholder="DD/MM/YYYY" type='text' class="form-control" required/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
 </div>

我需要在两个datepickers onchange中选择值（不提交表单）并将这些值传递给我的控制器，以便我可以减去它们的值并获得这两个日期之间的差异。

请帮忙！

Answer 1

在HTML输入摘要中添加ID标记，以便更轻松地引用它们。

你的片段，已更新

 <div class='input-group date datepicker1'>
   <input  id="inputOne" data-format="dd/mm/yyyy" name="startDate" placeholder="DD/MM/YYYY" type='text' class="form-control" required/>
       <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
       </span>
  </div>

  <div class='input-group date datepicker2'>
    <input  id="inputTwo" data-format="dd/mm/yyyy" name="endDate" placeholder="DD/MM/YYYY" type='text' class="form-control" required/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
  </div>

既然我们正在使用非实时节点，我们可以使用JS快速引用输入，然后就像抓取值并观察更改事件一样简单。注意：输入字段有一个特定的事件要监听，因为它不像onchange那样有bug或hacky。

获取值的JS看起来像这样：

var inptOne = document.querySelector('#inputOne');
var inptTwo = document.querySelector('#inputTwo');

function getValueOne() {
    var valOne = inptOne.value;
    return valOne
}

function getValueTwo() {
    var valTwo = inptTwo.value;
    return valTwo
}

    // NOTE THE USE OF "input" INSTEAD OF "onchange"
    // THIS WORKS NICELY WITH INPUT FIELDS
    document.body.addEventListener("input", getValueOne, false);
    document.body.addEventListener("input", getValueTwo, false);

上面的代码将为您提供进一步操作输入值的权限。

Answer 2

一种方法是使用g：link标记。

您可以查看http://grails.github.io/grails-doc/3.0.x/ref/Tags/link.html 了解更多信息。

或者你可以使用普通的g：textfield标签。

<g:textField name="startDate" required="" value="${yourDomainClassInstance?.startDate}"/>

如何从控制器中的datepicker获取所选日期的值？

2 个答案: