I am creating the input field to show the calendar date. Now I just only can click the input field to show the calendar date. Actually, I want to click the calendar icon to show the calendar date, then the calendar date will show in the input field, not click the input field to show the calendar. Hope someone can guide me on how to solve it. Thanks.
Below is my coding:
<div class="col-lg-12" style="margin-top:10px;">
<label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;"> *</span></label>
<div class="input-group col-lg-6">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
</div>
</div>
This is my output:
Actually, I want the expected result like below the picture. Can click the icon show the date then after choosing the date can show in the input field:
Try like this:
$(document).ready(function() {
$('.fa-calendar').click(function(){
$(document).ready(function(){
$("#document_date").datepicker().focus();
});
});
});
Here is the example
$(document).ready(function() {
$('.fa-calendar').click(function(){
$(document).ready(function(){
$("#document_date").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-lg-12" style="margin-top:10px;">
<label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;"> *</span></label>
<div class="input-group col-lg-6">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
</div>
</div>
Related
When I click on the text box or icon, I can't get the popup calendar to appear. I get no JavaScript errors and just can't seem to work out what the issue is.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#datetimepicker input').click(function(event) {
$('#datetimepicker').data("DateTimePicker").show();
});
</script>
<!-- in the body -->
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
Can anyone see what I'm doing wrong as I'm really confused now and can't seem to work it out.
Thanks
In document.ready you have to initialize the datepicker just use this
$("#datetimepicker ").datepicker({
dateFormat: 'd-M-yy'
});
and it will automatically show calendar when you click on input type
Ensure that you've correctly imported jQuery, jQuery DateTimePicker JS & CSS. Then use datetimepicker simply as following, no need of a click event -
$('#datetimepicker').datetimepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
I've read the documents for the Bootstrap DateTimePicker but I can't seem to work out how to read a value or pass a value to the html attribute tag "value".
For example I want the value to display in the TimeDatePicker but it does not show up. And if I was to add a TimeDate in the TimeDatePicker I want to also make that appear in a value tag.
The values are being read from the backend in Python.
<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" value="2017-03-08 08:00:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1').datetimepicker();
});
https://jsfiddle.net/8g2g8n3o/5/
You have to set the format of date time. Here's a demo.
$('#datetimepicker1').datetimepicker({
// set date time format
format: 'YYYY-MM-DD hh:mm:ss'
});
$('#datetimepicker1').on('dp.change', function() {
// date time change event
console.log($('#datetimepicker1').find('input').val()) // get selected date time
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<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" value="2017-03-08 08:00:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
It is possible to manage an input with type time to display only hours, not minutes.
<div class="form-group">
<label for="heure_seance" class="col-md-4 control-label">Heure : </label>
<div class="col-md-6">
<input id="heure_seance" type="time" step='60' class="form-control" name="heure_seance" required>
</div>
</div>
I need to use Javascript or it is possible with an HTML attribute?
I need to do this because on my database, time stored are entire hours, we don't store minutes.
Thank's for help!
You can either disable the input or set it as read-only to avoid unexpected entered text from the user.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH'
});
});
</script>
</div>
</div>
I have a form that submits with empty required fields.
I'm using Twitter BootStrap with it.
I posted this example in jsFiddle.
Maybe is just an tag issue from BootStrap, but i'm really not seeing what is wrong.
3 things:
That is not how you use required.
You need to wrap your jQuery code in .ready().
Move the <button> element inside the <form> and make it type="submit".
Updated Code:
$(document).ready(function(){
$(".action").click(()=>{
$(".ajaxForm").submit();
});
$(".ajaxForm").submit(()=>false);
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<button type="submit" class="action btn btn-success">Teste</button>
</form>
Updated jsFiddle
Thanks for the answers.
Since I have a button (div, actually) outside the form that will trigger the submit, I found my way by (quick fix) triggering a click on a hidden submit button.
The HTML:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<input type="submit" style="display:none" /> <!-- The hidden button -->
</form>
<button class="action btn btn-success">Teste</button>
The JavaScript:
$(".action").click(() = > {
$(".ajaxForm input[type='submit']").click();
});
$(".ajaxForm").submit(() = > false);
So, this quick fix will work, for now. Here is the jsFiddle updated.
I have a situation with datetimepicker. It doesn't show any calendar When I click the icon.
The chrome browser not showing any errors in the development console.
<script src="Scripts/jquery-2.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment.js"></script>
<link href="css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<div class="row cuadrado">
<div class="col-md-4 col-sm-6 col-xs-1"><h4>Fecha de Nacimiento :</h4></div>
<div class="col-md-8 col-sm-6 col-xs-1">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1>input').datetimepicker({
format: "yyyy-mm-dd"
});
});
It's a lot easier if you provide the input with a proper id and bind the datetimepicker plugin to it.
HTML
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="date">Date</label>
<div class="input-group">
<input name="date" type="text" id="my-date" class="form-control form-date">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
JS
$( '#my-date' ).datetimepicker( { format: 'MM-DD-YYYY' } );
Here is a working JSFiddle
First of all just include the jquery ui.min.js file for example
<link href="Contents" src="Scripts/jquery-ui-2.1.1.min.js">
and then write the code accordingly as mentioned below:
$("#datetimepicker1").datepicker({
dateFormat: "dd,MM,yy",
showOn: "button",
buttonText: "Select Date",
changeYear: "true",
changeMonth:"true"
});
add class="form-group",this works for me, but I don't know why
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>