我有一个日期选择器,您可以在文本字段中选择数据和日期.但是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=""/>
这是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"
})
谢谢
我现在这样:
; (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);
我试试这样:
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();
我现在这样做:
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"
})
使用onSelect.但后来我得到了这样的输出:wed jul 29 00:00:00 UTC 0200 2015作为输出.如何获得与文本字段相同的输出.所以输出必须是:29-7-2015.
谢谢
哦,我现在就像这样:
onSelect: function (dateText, inst) {
dateText = $("#form_inp1").val();
},
但是,如果我看看文本字段
<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=""/>
价值仍然是空的
输出的实际值是:2015-08-04T00:00:00Z.
但是我从datepicker中得到了所选的值:4-8-2015T00:00:00Z
那么如何获得正确的返回日期如下:2015-08-04T00:00:00Z.
谢谢
解决方法:
首先,确保将datepicker分配给右边的元素,然后选择input元素并在元素上使用`.val()`.下面是一个例子.
例:
<!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>
我希望这可以帮助你.
P.S.:以下是官方文档的链接,以备不时之需:https://jqueryui.com/datepicker/