Datetimepicker doesn't work - javascript

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>

Related

Icon clicking to show the date

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">
&nbsp <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">
&nbsp <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>

how to change the format of the bootsrap datepicker to dd-monthname-yyyy

I want to get the date format in the form of 30-sep-2019 instead of 30-09-2019
JS
$(document).ready(function () {
$('.form-control.fromdate').datepicker({ format: "mm-dd-yyyy", changeMonth: true, changeYear: true });
}
HTML
<div class="input-group fromdate" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control fromdate" placeholder="mm-dd-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
Please refer the documentation, try using:
format: 'dd-M-yyyy'
$('#table').datepicker({
format: 'dd-M-yyyy'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class='input-group date datepicker' id='table'>
<input type='text' name="tgl" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Change your code to $('.form-control.fromdate').datepicker({ dateFormat: 'dd-MMM-yy' }).val();

Bootstrap Datepicker not responsive

I have a bootstrap datepicker in a div. Everything works fine until i reduce the window's dimensions.
The code is the following:
<div class="col-md-3">
<p> Pick a Date: </p>
<div class="datepicker input-group" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-3">
<p>Choose a Campaign:</p>
<select id="selectCampaign" class="form-control">
<option value="opt1" id="opt1">opt1</option>
<option value="opt2" id="opt2">opt2</option>
</select>
</div>
<div class="col-md-3">
<a class="btnSearch" href="#">Search</a>
</div>
$(document).ready(function () {
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
});
Here's the "error":
Here's the normal app behaviour:
Make sure that you're using the latest version of bootstrap. Otherwise, it should run as intended. Refer to my answer below. Hope this is what you're looking for.
Edit I think, the main mistake you're making is not providing an id for the datepicker.Only when the id is provided and called, the datepicker is going to become responsive. Check out the code snippet that I've modified.
Define an id for the datepicker as here below.
<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
Datepicker code snippet
$(document).ready(function() {
$(function() {
$('#datetimepicker1').datetimepicker({format: 'DD/MM/YYYY'});
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-3">
<p> Pick a Date: </p>
<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-3">
<p>Choose a Campaign:</p>
<select id="selectCampaign" class="form-control">
<option value="opt1" id="opt1">opt1</option>
<option value="opt2" id="opt2">opt2</option>
</select>
</div>
<div class="col-md-3">
<a class="btnSearch" href="#">Search</a>
</div>
Hope it works now

What is a simple way to pass DateTimePicker to value and read from value?

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>

can i use 'input' with type 'time' to display hours instead of minutes?

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>

Categories