jQuery datepicker on click icon

入力フィールドの中にあるFontAwesomeアイコンをクリックするとjQueryのdatepickerが表示されます。jQuery datepicker on click icon

<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>

例です210

出典

2017-04-25 08:44:43 Abi

これは私のために働いてます。..おかげアビ – Mathi

あなたは

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

出典

2017-04-25 08:21:35

する

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

を変更する必要があるので、あなたは、入力ボックスではなく、アイコンの上に日付ピッカーをトリガしたい：以下のコードです

日付ピッカーの'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

答えて

関連する問題