gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 14:48:17 25 4
gpt4 key购买 nike

我是初学者,当前正在使用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" />

最佳答案

<g:datePicker>创建日期选择器,该日期选择器将一天中的日期,月份,年份,小时和秒显示为HTML选择标记。

因此,您只需使用引导日期选择器即可实现此目的。

 $(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 - 单击按钮时如何弹出日历并在Grails 3.3.9的文本字段中存储值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58446282/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com