单击图标时的jQuery日期选择器

我想在点击输入字段内的FontAwesome图标时显示jQuery datepicker。下面是代码：单击图标时的jQuery日期选择器

<div class="col-md-4 col-sm-4 col-xs-12"> 
    <label for="datepicker">Date of birth*</label> 
    <input type="text" name='datepicker' class="form-control" value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" > 
    <span class="fa fa-calendar"></span> 
</div>

jQuery('.fa-calendar').on('click' , function() { 
    jQuery(this).datepicker().trigger('focus'); 
});

来源

2017-04-25 Mathi

试试这个

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
    $('.fa-calendar').click(function() { 
    $("#datepicker").focus(); 
    }); 
});

初始化日期选择器只有一次

这里是例子

$(document).ready(function() { 
 
    $("#datepicker").datepicker(); 
 
    $('.fa-calendar').click(function() { 
 
    $("#datepicker").focus(); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="col-md-4 col-sm-4 col-xs-12"> 
 
    <label for="datepicker">Date of birth*</label> 
 
    <input type="text" name='datepicker' class="form-control" value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" > 
 
    <span class="fa fa-calendar"></span> 
 
</div>

来源

2017-04-25 08:44:43 Abi

这是为我工作..谢谢阿比 – Mathi

要触发输入框，而不是图标的日期选择器，所以你需要改变

jQuery(this).datepicker().trigger('focus');`

是

jQuery("#datepicker").datepicker().trigger('focus');

来源

2017-04-25 08:21:35

您可以使用日期选择器上的'open'设置以编程方式打开它。无需触发focus事件。您还需要调用元素上的datepicker()方法，而不是点击图标。试试这个：

jQuery(function($) { 
    $('#datepicker').datepicker(); 

    $('.fa-calendar').on('click', function() { 
    $('#datepicker').datepicker('open'); 
    }); 
});

来源

2017-04-25 08:23:29

HTML

<div class="col-md-4 col-sm-4 col-xs-12"> 
<label for="datepicker">Date of birth*</label> 
<input type="text" name='datepicker' class="form-control" value="Select 
date" id="datepicker_val" ng-required="true" placeholder="MM/DD/YYYY" > 
     <span class="fa fa-calendar"></span> 
</div>

jQuery(".fa-calendar").datepicker();

这是你想要做什么。它会起作用，你可以像下面那样在你的输入类型中填入日期。

jQuery(".fa-calendar").datepicker().on('changeDate', function(ev){ 

      jQuery("#datepicker_val").val(ev.date.valueOf()); 

     } 
    });

来源

2017-04-25 08:29:38 TheTom

$(function() { 
 
    $("#datepicker").datepicker({ 
 
     showOn: "button", 
 
     buttonImage: "images/calendar.gif", 
 
     buttonImageOnly: true, 
 
     buttonText: "icono", 
 
showOn: "both" 
 
    }); 
 
    });

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Datepicker - Icon trigger</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
</head> 
 
<body> 
 
    
 
<p>Date: <input type="text" id="datepicker"></p> 
 
    
 
    
 
</body> 
 
</html>

来源

2018-02-21 01:48:19

单击图标时的jQuery日期选择器

回答

相关问题