bootstrap-timepicker not working - javascript

I am trying to get timepicker to work similarly to datepicker:
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
var date = new Date();
date.setDate(date.getDate()+1);
$('div.input-group.date').datepicker({
startDate: date
});
</script>
<div class="form-group">
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
Datepicker works, but Timepicker dos not show up when clicked. Did I do something wrong in the javascript part?


In head
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="css/bootstrap-timepicker.min.css" rel="stylesheet">
In body
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
var date = new Date();
date.setDate(date.getDate()+1);
// $('div.input-group.date').datepicker({
$('#caldate').datepicker({
startDate: date
});
</script>
<div class="form-group">
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker({
defaultTime: 'current',
minuteStep: 1
});
</script>

Related

Time not getting selected with the single click in datepicker

I have two input boxes one is for selecting date and another for time, I am trying to validate these two boxes based on some conditions, such that if the date is not selected, the time should not get selected and i'm using eonasdan datetimepicker, i'm getting the desired output but not with the single click on a timepicker can some one help me out with this Thank you
Here's what i have done so far :
function starttime(){
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
}
$('.start_time_addon').on('click keyup',function(){
var x = $('#start').val();
if (x == '') {
alert('please select startdate first');
return false;
}
else{
starttime();
}
});
var datePickerSix= $('.datetimepicker6');
$(datePickerSix).datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

$('.datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
$('.datetimepicker6').on("dp.change", function(e) {
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control input_date" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

Can't change the format of Bootstrap DateTimePicker

I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});

$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});

The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>

In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.

Alloy-ui multiple datepicker send selection to other input

I have AlloyUi datepicker that is triggered by div id="trigger", but I want to display the dates selected in the hidden input id="dates".
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker(
{
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
on: {
dateClick: function(event) {
output.set('value', Y.Date.format(event.date,{format:multidatepicker.get('mask')}));
}
}
},
popover: {
zIndex: 10
},
panes: 2
})
});
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
I found a solution here, but it only passes a single date to the input. I need to pass a date range selected by the user.
Any ideas?

You can copy the #startdate value attribute into the #dates value attribute after the date is clicked:
after: {
dateClick: function(event) {
output.set('value',
Y.one(multidatepicker.get('trigger')).get('value'));
}
}
Here's a runnable example with your code:
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker({
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
after: {
dateClick: function(event) {
output.set('value', Y.one(multidatepicker.get('trigger')).get('value'));
}
}
},
popover: {
zIndex: 1000
},
panes: 2
})
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

Bootstrap input group addon not same heigth

I create a timpicker with input group addon.
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text"
style=" position: relative;"> <span
class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
But it returns
Can you I get same height.

You just forget to pply bootstrap class form-control to the input field. Just add the class as:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text" class="form-control" style=" position: relative;" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
JSfiddle Demo

You need to add the class form-control to your input:
<input id="timepickermailingtoupsummary" type="text" class="form-control">
And there are 3 class sizes as well.
body {
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="well well-sm">Default</h2>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<hr>
<h2 class="well well-sm">Small</h2>
<div class="input-group bootstrap-timepicker timepicker input-group-sm">
<input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<hr>
<h2 class="well well-sm">Large</h2>
<div class="input-group bootstrap-timepicker timepicker input-group-lg">
<input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>

This will help you..
Demo: http://jsfiddle.net/qW2wL/142/
<div class="input-append bootstrap-timepicker-component">
<input type="text" class="timepicker-value input-small" value="12:42 PM">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>

How to get Date and Time Picker values from textbox?

I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this

You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual

Categories

Resources