jqueryjquerydatetimepicker

How to show icon with jquery calender control?


I am using jqueryDateTimePicker, jquery.datetimepicker.full.js, I want to show calender icon with input control, but icon is not showing, any help?

I am using following datetime control http://www.htmldrive.net/items/show/1788/jQuery-plugin-select-date-and-time-DateTimePicker


Solution

  • Please try this

    Keep to add this CSS and JS.

    $(document).ready(function() {
       $('#datetimepicker').datetimepicker({value:'1997/08/25 05:03',  autoOpen:false,});
    
      $('.fa-calendar').on('click', function () {
        if($('.xdsoft_datetimepicker').css("display")=="block"){
          $('.xdsoft_datetimepicker').css("display","none")
        }else{
          $('.xdsoft_datetimepicker').css("display","block")
        }
      });
      
      $('#datetimepicker').on('focus', function () {
        if($('.xdsoft_datetimepicker').css("display")=="block"){
          $('.xdsoft_datetimepicker').css("display","none")
        }else{
          $('.xdsoft_datetimepicker').css("display","block")
        }
      });
      
    });
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2015/201512/20151207/datetimepicker-master/jquery.datetimepicker.css"/>
    <script src="http://www.htmldrive.net/edit_media/2015/201512/20151207/datetimepicker-master/build/jquery.datetimepicker.full.js"></script>
    
    <input type="datetimepicker" value="" id="datetimepicker">
    <span class="fa fa-calendar"></span>