单击按钮时如何弹出日历并将值存储在 grails 3.3.9 的文本字段中

Question

我是初学者，目前使用的是 grails 3.3.9 版。我想做一个注册表。在我的表单中，我想添加一个带有文本字段的按钮，whenever i click on button it show a calendar and than take a input on text field like this:

这里是form.gsp

的代码

    <label class="my-reg-right"><g:message code="birth.date"/></label>
    <div class="input-group" >
        <input type="text" name="birthdate" value="${member?.birthdate}" class="col-md-8" />
        <i class="fas fa-calendar col-md-2"></i>

    </div>

我该怎么做？当我像这样编写代码时，它工作正常并将日期输入数据库

<g:datePicker name="birthdate" value="${member?.birthdate}" class="col-md-8" />

Answer 1

<g:datePicker> 创建一个日期选择器，它呈现为 HTML select 标签，用于日、月、年、小时和一天中的第二个。

因此，您可以使用 bootstrap 日期选择器简单地实现此目的。

 $(function () {
   var bindDatePicker = function() {
  $(".date").datetimepicker({
        format:'YYYY-MM-DD',
   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('YYYY-MM-DD');
   }

   $(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    Date formats: yyyy-mm-dd, yyyymmdd, dd-mm-yyyy, dd/mm/yyyy, ddmmyyyyy
  </div>
  <br />
    <div class="row">
        <div class='col-sm-3'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

希望对您有所帮助。

单击按钮时如何弹出日历并将值存储在 grails 3.3.9 的文本字段中

How to popup calendar when click on button and store value in text field in grails 3.3.9

grails