Jquery 日期时间选择器只有在点击日历图片时才必须打开
Jquery datetime picker has to open only when clicked on Calendar image
我正在使用 Jquery 日期时间选择器。我不想在跳转到文本框时打开日历。我想在文本框的末尾放置一个日历图像。当我在日历图像上单击一次时,我想将日历打开到 select 日期时间。此选项有效。如果我只使用日期选择器控件 - 我只能 select 日期 - 它不起作用。
在下面的代码中,日期选择器完全按照我想要的方式工作,没有时间选项。我想要日期和时间选项,它只需要打开一次,当我点击图片时。
日期选择器:
$("#ImageDate").datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
日期时间选择器:
$("#ImageDate1").datetimepicker({
autoOpen: false,
showOn: 'button',
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
format: 'm/d/Y H:i',
});
您需要在点击该图像时触发日期选择器
这是可能对您有所帮助的示例....
Js代码:
$(function() {
$('#startTime1Trigger').on('click', function(){
var $t = $(this),
$tp = $(this).parent().siblings('.timepicker').first();
if ($tp.timepicker())
$('#startTime1').timepicker('show');
});
});
Html代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<label for="startTime1">* Proposed Start Time:</label>
<div class="input-group">
<input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
<span class="input-group-addon">
<i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>
</span>
</div>
我正在使用 Jquery 日期时间选择器。我不想在跳转到文本框时打开日历。我想在文本框的末尾放置一个日历图像。当我在日历图像上单击一次时,我想将日历打开到 select 日期时间。此选项有效。如果我只使用日期选择器控件 - 我只能 select 日期 - 它不起作用。
在下面的代码中,日期选择器完全按照我想要的方式工作,没有时间选项。我想要日期和时间选项,它只需要打开一次,当我点击图片时。
日期选择器:
$("#ImageDate").datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
日期时间选择器:
$("#ImageDate1").datetimepicker({
autoOpen: false,
showOn: 'button',
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
format: 'm/d/Y H:i',
});
您需要在点击该图像时触发日期选择器 这是可能对您有所帮助的示例....
Js代码:
$(function() {
$('#startTime1Trigger').on('click', function(){
var $t = $(this),
$tp = $(this).parent().siblings('.timepicker').first();
if ($tp.timepicker())
$('#startTime1').timepicker('show');
});
});
Html代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<label for="startTime1">* Proposed Start Time:</label>
<div class="input-group">
<input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
<span class="input-group-addon">
<i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>
</span>
</div>