I am using bootstrap timepicker (http://jdewit.github.io/bootstrap-timepicker/) and want to format the default value this way: 00:00 but there is only one leading zero in my solution:
Here is the code:
<div class="input-append bootstrap-timepicker">
<input type="text" id="timepicker1" class="input-small bookingTextBox" />
</div>
Javascript:
$('#timepicker1').timepicker(
{
minuteStep: 1,
showMeridian: false,
defaultTime: '00:00'
});
Is there a way to show 00:00 as default value?
check on this link for help for you click here
try this
defaultTime : '00:00 AM'
Related
I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I'm using DateTime Picker and I want to load a only Time picker.
I initialize my input field like this and works good. This let me pick only times jsfiddle:
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
If I want initialize this input with a time preselected, JS error occurs:
"Uncaught TypeError: Cannot read property 'getTime' of undefined"
But if I put the input value like this 2017-12-24 13:00, the input time picker have that full value. That works good, but I want that the first value could be only the time, not full datetime.
Here is jsfiddle with a value preloaded. I want that this value could be 13:00:
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
Let's do a little trick. First we'll hide the input field. Then we'll devide the datetime value by space character to get only the time and set this as the input value. After that we will show the input field.
var $hour_from = $("#hour_from");
$hour_from.datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1,
timeFormat: 'hh:mm',
});
$hour_from.val($hour_from.val().split(' ')[1])
$hour_from.show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.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-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" data-date-format="hh:ii" style="display:none;" />
</div>
And few years later I had a similar problem, and solved it with data attribute like this.
Lets take all the code posted in the question (second part, where you added value).
I added few data attributes to the input, data-date and data-inputvalue and have left the actual value empty.
<input type="text" id="hour_from" name="hour_from" class="form-control" data-date="2017-12-24 13:00" data-inputvalue="13:00" value="" />
Now let's init the date picker just like in posted question, and add three rows below.
//init
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
//taking data attr and storing it to value
var inputvalue = $('#hour_from').data('inputvalue');
$('#hour_from').val(inputvalue);
//informing datepicker the value changed (will work without this)
$('#datetimepicker_hour1').datetimepicker('update');
Here is the whole example in a working fiddle.
Hope this helps someone ;D
Set the value in the inputfield after datetimepicker has been initialized, then everything works.
var hour_from = "13:00";
<div class="input-group date" id="datetimepicker_hour1">
<input type="text" id="hour_from" name="hour_from" class="form-control" value="" />
</div>
$('#datetimepicker_hour1').datetimepicker({
language: 'es',
format: 'hh:ii',
minuteStep: 60,
autoclose: true,
minView: 1,
maxView: 1,
startView: 1
});
$('#hour_from').val(hour_from);
I am using this repo by smalot and I want to select and show date only (for some other places I am showing data and time, therefore selecting this repo). I can manage to use it for selecting date only but the generated date string is always yyyy-mm-dd hh:ii. And if I did not understand wrongly the format option is for parsing the initial date only but not setting dates.
<div class="input-group date datetime dateonly" data-start-view="2" data-min-view="2" style="margin-bottom: 0;">
<input class="form-control" size="16" type="text" placeholder="Release Date" id="release-date" name="release_date" value="{{ unit.release_dt|date:'Y-m-d' }}" style="cursor: default; background-color: #ffffff;">
<span class="input-group-addon btn btn-primary"><span class="glyphicon glyphicon-th"></span></span>
</div>
I am setting startView and minView to be both 2 so that the user will need to select date only but I still got 2015-09-22 00:00 as the output-- I just want it to show 2015-09-22.
In fact, by listening to changeDate and hide events, I can just set the value of date inputs. I am wondering if there is a less hacky and dirty way of doing it
$('.datetimepicker').on('changeDate', function(e) {//get substring and set date input
}).on('hide'....//same thing
);
Use date picker
$("#calender").datepicker({
format: "mm/dd/yyyy"
});
To show date only use
format: 'L'
To show Time only use
format: 'LT'
Reference
https://github.com/Eonasdan/bootstrap-datetimepicker/issues/832
you will edit datetaimepicker.js
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
like this
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd'
wish can help you!
Try this -
HTML:
<div class="controls input-append date m" data-date="" data-date-format="yyyy-mm-dd" data-link-field="m1" data-link-format="yyyy-mm-dd" data-start-view="2" data-min-view="2">
<input size="16" id="m" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="m1" value="" />
JS:
$('.m').on('changeDate', function(e) {
console.log($("#m").val());
});
Console:
2015-12-08
Hope it will help.
I am using Bootstrap 3 Datepicker for that I am trying following
<div class='input-group date datetimepicker1'>
<input type='text' name="actEndDate" placeholder="End Date" class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
and calling it by following
$(".datetimepicker1").datetimepicker();
Its working fine
now i am changing date using JavaScript on clicking of other field i have date formate like 11/4/2015 and for that i am trying following
$('.datetimepicker1').datetimepicker({
defaultDate: "11/1/2013"
});
now how to preselect date ?
Note : its different from jquery datepicker
I see this way for your question:
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("10/2/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
you can see this page for other doubt.
Setting defaultDate parameter is the right method to resolve it.
Currently I have the startView showing the current decade, which is ok but I want to make the previous decade be the startView - not the current decade.
this.dobDatePickerView = new DatePickerView({
el: this.$('[name="dob"]'),
startView : 'decade',
endDate : this.sandbox.dates().fwFormat('date'),
value : this.sandbox.dates().subtract('years', 18).fwFormat('date')
}).render();
I want to subtract 18 years from the decade view default selected year, so instead of '2013' being pre-selected it should default to 1995.
This could work: (demo):
<div class="input-append date" id="dp1" data-date="01-01-1990" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$('#dp1').datepicker();
</script>
By separating the datepicker from the input and setting a default value on the picker but not the input, you can get something that will only populate a date once a date is selected but start at any value you please.
https://github.com/eternicode/bootstrap-datepicker#setstartdate
perhaps try calling setStartDate() on the datePicker, when it is clicked/opened, and set the date ten years ago