DateTimepicker bootstrap with sveltekit

Question

i want to write this code with svelte framework

<div class="container"> 
  <div class="row"> 
  <div class='col-sm-6'> 
  <div class="form-group"> 
   <div class='input-group date' id='datetimepicker1'> 
     <input type='text' class="form-control" /> 
     <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> </span> 
  </div> 
</div> 
</div> 
<script type="text/javascript"> 
$(function () { $('#datetimepicker1').datetimepicker(); }); 

</script> 
</div> 
</div>

Or if there is another way to write the timing as in the picture

enter image description here

I searched for a long time and didn't find a solution

Answer 1

I can see you're using jQuery in svelte, do note that the $ shorthand is a reserved word in svelte and this won't work. Please visit this question to see how to use jQuery and Svelte together... Otherwise you could use the vanillajs-datepicker library to implement the date picker in your svelte web app. See my demo of the library here. Do read the comments for more guidance
Happy Coding ....