Datepicker box is not displaying selected date from database - javascript

In this image you can see date is showing
but in 2nd image(Date picker) it shows the today date not the selected date.
my code is below
< input name="period" id="period" type="text" value="{{$item->period}}" class="validate date-picker" >
JavaScript code is:
$('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
Thanks in advance
faisal

use setDate( date ):
It set the date for the datepicker.
eg:
$( ".datepicker" ).datepicker( "setDate", "yourdate" );

You are setting the input value format of date wrong that why it is not working
For example, you are setting the value of input field "10-29-2012" and you have specified the format "yyyy-mm-dd" your both format should be same the below is the working sample
The documentation link can be also helpful for you of date picker
Date picker set date `
$(document).ready(function() {
$('#js-date').datepicker({
format: 'yyyy-mm-dd'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
With data provide attribute
</div>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="data-date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
Uses the data-provide attribute in HTML
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
With JavaScript
</div>
<div class="col-sm-6">
<div class="input-group date">
<input type="text" class="form-control" id="js-date" value="2018-12-19">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
No data-provide attribute in HTML. Initialized using JavaScript
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-primary" style="margin-top: 10px;">
Plugin Used: https://github.com/uxsolutions/bootstrap-datepicker
</p>
</div>
</div>
</div>

Related

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

Keeping OK button disabled when day is not selected in Materialize datepicker

When selecting a date from Materialize datepicker, a user sometimes may not select a day for many unknown reasons, but the "OK" button remains active, promoting them to click and of course no date value is selected.
So far, after they click "ok", I can be able to check that the date value is empty prompting them to select a day.
However, my question is about deactivating the "OK" button all together so that they have to select a day to make it active. May be there is Materialize option which I've not found from the guide
Code:
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd"
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>
You can implement onOpen and onSelect method of datepicker. There no such feature inbuilt in materialise css I guess so Try below updated code..
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd",
onOpen:function(){
$('.datepicker-done').prop("disabled", true);
},
onSelect:function(){
$('.datepicker-done').prop("disabled", false);
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>

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>

Why date is not displaying for jquery date picker?

Iam using date picker jquery and it is not displaying inside input field. My link is https://jsfiddle.net/sbk2hd4c/10/ .
My code:
<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>
</div>
</div>
My link is: https://jsfiddle.net/sbk2hd4c/10/
Thankyou in advance!!!
Check this
https://jsfiddle.net/sbk2hd4c/11/
You used your Id in div which should be in your input tag
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id='datetimepicker1' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='text' class="form-control" id='datetimepicker1' />
Change the id for input as above. Div should have different id.
You can bind the changeDate to the datepicker and can set the date in textBox
$('#datetimepicker1').datetimepicker().on('changeDate', dateChangeListener);
function dateChangeListener(event) {
var formattedDate = event.format('dd.mm.yy');
$('text_box_id').val(formattedDate);
}

Categories