Javascript 如何从文本字段中的日期选择器获取值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31612903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the value from datepicker in textfield
提问by InfinityGoesAround
I have a datepicker and you can select a data and that date apears in a textfield. But value in the textfield is empty, So how to get the value in the textfield? this is the textfield:
我有一个日期选择器，您可以选择一个数据，该日期出现在文本字段中。但是textfield中的值是空的，那么如何获取textfield中的值呢？这是文本字段：
<input name="form_inp1" title="" class="xforms-input xforms-control qmatic-dateslot xforms-incremental xforms-ap-default hasDatepicker" id="form_inp1" type="text" x-incremental="1" value=""/>
and this is the script for the datepicker:
这是日期选择器的脚本：
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date)
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
Thank you
谢谢
I have it now like this:
我现在有这样的：
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
var dateVal = $("#form_inp1").datepicker("getDate");
alert(dateVal);
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
I try it like this:
我像这样尝试：
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
var dateVal = $("#form_inp1").datepicker("getDate");
alert(dateVal);
});
$("#ui-datepicker-div").hide();
I do it now like this:
我现在这样做：
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
onSelect: function (dateText, inst) {
var dateval = $("#form_inp1").datepicker("getDate");
alert(dateval);
// alert(dateText);
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
with the onSelect. But then I get for example this output: wed jul 29 00:00:00 UTC+0200 2015 as output. How to get the same ouput as in the textfield. So the output has to be: 29-7-2015.
与 onSelect。但是后来我得到了例如这个输出：wed jul 29 00:00:00 UTC+0200 2015 作为输出。如何获得与文本字段相同的输出。所以输出必须是：29-7-2015。
Thank you
谢谢
Oke, I have it now like this:
好的，我现在是这样的：
onSelect: function (dateText, inst) {
dateText = $("#form_inp1").val();
},
But If I look in the textfield
但是如果我查看文本字段
<input name="form_inp1" title="" class="xforms-input xforms-control qmatic-dateslot xforms-incremental xforms-ap-default hasDatepicker" id="form_inp1" type="text" x-incremental="1" value=""/>
value is still empty
值仍然为空
the actual value what in output is: 2015-08-04T00:00:00Z.
输出中的实际值是：2015-08-04T00:00:00Z。
But I get as selected value from datepicker this: 4-8-2015T00:00:00Z
但我从日期选择器中得到了选定的值：4-8-2015T00:00:00Z
So how to get the correct returned date like this: 2015-08-04T00:00:00Z.
那么如何像这样获得正确的返回日期：2015-08-04T00:00:00Z。
Thank you
谢谢
采纳答案by Abraham Duran
First, make sure you are assigning the datepicker to the right element, then select the input element and use .val()on the element.
首先，确保将日期选择器分配给正确的元素，然后选择输入元素并.val()在元素上使用。
Example:
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>I hope this helps you.
我希望这可以帮助你。
P.S.: Here is a link to the official documentation, in case you need it: https://jqueryui.com/datepicker/
PS：这里是官方文档的链接，以防万一：https: //jqueryui.com/datepicker/
回答by lem2802
with: $("#form_inp1").datepicker("getDate")you will get a Date object
with：$("#form_inp1").datepicker("getDate")你会得到一个 Date 对象
with: $("#form_inp1").val()you will get a string
with：$("#form_inp1").val()你会得到一个字符串
