We Keep Coding

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this

Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});

see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/

try using step: 60 not steps
please check this link also :click here

Contact form 7 datepicker depending on a textfield value

I've created a form with a text field showing a date with this format: dd/mm/yyyy, and then I have a datepicker.
This Contact form 7 datepicker should have a mindate depending on the textfield value.
Actually I have only this code on the datepicker, because I need only Thursday are enabled.
<script type="text/javascript">
jQuery(function($){
$("#code").datepicker({
beforeShowDay: function(date){
var day = date.getDay();
return [day == 4];
}});
});
</script>
Text field code ([showparam fecha] is a shortcode depending on an URL parameter):
<input name="date-start" id:"date-start" value="[showparam fecha]" size="40" class="wpcf7-form-control wpcf7-text" aria-required="false" aria-invalid="false" type="text" disabled>
Datepicker code:
[date* date-end id:code date-format:mm/dd/yyyy min-date:0 max-date:31/12/2017]
Image:
Front
Any idea?
Thank you so much
Luis

How do I format the date with bootstrap datepicker?

I have a select drop down that activates two datepicker input field depending on what is selected. When one field is selected, I would like to fill in the value of today's date plus one year. However, when I select that, I get this: Tue Aug 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time). I would like to have the date as: mm/dd/yyyy.
I have setup a fiddle. http://jsfiddle.net/mwoods98/aku8ytju/
Updated fiddle
Here is a look at the code:
$(document).ready(function() {
$('#getHoldStatus').change(function()
{
var selected_item = $(this).val()
if(selected_item == "3"){
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val("").removeClass('invisible');
var date = new Date("8/11/2014");
var date3 = new Date("8/11/2015");
$('#datepicker2').val(date3);
var newDate = new Date(date3.getFullYear(), date3.getMonth(), date3.getDate()+1);
$('#datepicker2').datepicker({ dateFormat: "mm/dd/yyyy" });
}
else if(selected_item == "2") {
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker2").val('0');
}
else
{
$('#datepicker').val(selected_item).addClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker").val('');
$("#datepicker2").val('');
}
}
);
// put all your jQuery goodness in here.
});
I am manually setting the date here for now but I can't seem to get it formatted properly.
<label class="control-label" for="getHoldStatus">
Hold Status
</label>
<div class="controls">
<select id="getHoldStatus" name="getHoldStatus">
<option value=""></option>
<option value="1" >None</option>
<option value="3" >On Hold until Candidate Available</option>
<option value="2" >On Hold until Position Available</option>
</select>
</div>
<label class="control-label" for="input08">
Hold Start Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker" ).datepicker({autoclose: true, todayHighlight: true, orientation: "bottom right"});
});
</script>
<div><input type="text" id="datepicker" value="" name="fdfHoldStartDate" class="invisible" /></div>
</div>
<label class="control-label" for="input09">
Hold End Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker2" ).datepicker({format: "mm/dd/yyyy", autoclose: true, todayHighlight: true});
});
</script>
<div><input type="text" id="datepicker2" value="" name="fdfHoldEndDate" class="invisible" /></div>
</div>
UPDATE: For some reason, the fiddle did not update. I have confirmed it and now the source appears relevant to the question I was asking. You can see how the date is being formatted when a selection is made.

Look at this: Bootstrap 3 datepicker - code generator
<input type="text" type="text" id="date1">
$('#date1').datepicker({
format: "mm-dd-yyyy"
});

Use the format instead of formatDate:
$('#datepicker2').datepicker({ format: "mm/dd/yyyy" });
The check in/check out example should be useful: Datepicker for Bootstrap

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!

Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});

I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me

The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/

you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it