how to make a bootstrap datepick button - javascript

as the title says, I want to make a bootstrap datepicker which will show up when a user clicks on a button. I have been searching for some tutorial for whole 2 days and found only tutorials for datepickers with input. The only site which shows that it is possibe is this one.
Unfortunately there is not shown the code for it. That is why I am here. I hope you guys can help me from my desperation :)

This is extracted from the Bootstrap Datepicker website you linked above, and adapted to use a button instead of a button-like link-element: http://jsfiddle.net/VchBF/
HTML:
<button class="btn small" id="button" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Your Date Picker</button>
JS:
$('#button').datepicker()
.on('changeDate', function(ev){
$('#button').datepicker('hide');
alert(ev.date.valueOf());
});

This is What I did With Jquery
Steps :
In html file paste this
<input type="text" id="your-datepicker-id" style="display: none;">
In JS file paste this
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>'
})
Output Will Be A Button
<button type="button" class="ui-datepicker-trigger"><i class="fa fa-calendar"></i></button>
Extras :
You Can Add bootstrap Classes as
$(".ui-datepicker-trigger").addClass("btn btn-success")
You Can also do ajax calls as
$('#your-datepicker-id').datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonText: '<i class="fa fa-calendar"></i>',
onSelect: function (dateText) {
jQuery.ajax({
type: "GET",
dataType: "script",
url: your_url
})
}
})
Note: (dateText == Date Which is Selected)
This is the output i Got

You just need to define the markup for your input..
<div class="container">
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" id="myDate">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
And then use jQuery to use the datetime picker on the input..
$('#myDate').datepicker();
Here's a working example: http://bootply.com/86820

Related

How to show always days on datepicker when is open?

I'm using eonasdan-bootstrap-datetimepicker:
<input type="text" class="form-control" ng-model="$ctrl.date" id="dateStart">
<script type="text/javascript">
$("#dateStart").datetimepicker({
format: 'ddd, D MMMM YYYY',
showTodayButton: true
});
</script>
What I want to achieve is that everytime I close the picker and reopen it I'll always have the days picker.
Right now If I'm in the "datepicker-months" and click outside, the picker will close and if I reopen it it will show the months view again, but I want the days one.
I tried with:
on('dp.show', function(e) {
$(".datepicker-days").show();
$(".datepicker-months").hide();
$(".datepicker-years").hide();
$(".datepicker-decades").hide();
});
This ways looks like it's working: if I close it during months view and reopen it I'll get the days datepicker, but if from here I click on the month again I'll get the datepicker-years..
Any help would be appreciated.
EDIT:
Code here:
http://jsfiddle.net/xrqkyypd/51/
The answer is pretty much straightforward using events and viewMode function.
You only must check that when the picker get hide then you reset his viewMode to which ever you want, in this case the days view.
$('#myDatepicker').on('dp.hide', function(e) {
$('#myDatepicker').data("DateTimePicker").viewMode('days')
});
According with documentation, you can set like this:
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years' //days, weeks etc
});
});
</script>
</div>
For more details check view mode

How to force Bootstrap calendar to focus and open under the <i> tag when click on input?

I have a Bootstrap calendar. It opens when I click on the calendar icon but it does not open when I click on the input. I want to make the calendar open under the calendar icon not under the input element when click on input.
<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$(document).ready(function() {
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
$('#dp2').click(function(event){
event.preventDefault();
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
});
</script>
I think simple questions are not answered here. Instead of clicking to the vote down button it would be useful to provide a working example link. Anyway took more then half an hour but made it to work it was very simple. didn't think to use $('#dp3').datepicker('show');
$(document).ready(function() {
$("#dp3").datepicker();
$('#dp2').click(function () {
$('#dp3').datepicker('show');
});
});

How to prevent auto open in bootstrap date picker?

I'm using bootstrap datepicker in my application which is dynamically built.
the dialog box is automatically open when the form is submitted with the data.
Below is my code:
JSP:
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" id="Q${qaf.id}_${qaf.type}" name="${qaf.id}" type="text" value="${fn:escapeXml(qaf.answerValue[0])}"/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
Javascript::
$(function (event) {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
});
});
Help me out to prevent the auto open .
I appreciate your help! Thanks in advance...
$(function () {
$('.datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoApply": true,
locale: {
format: 'YYYY-MM-DD'
}
});
});
use this

Jquery to get an instance and write it to input field

<div class="form-group">
<div class='input-group' id='datepicker-start'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon date"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Hi Guys this my date picker css with bootstrap
I am using Zebra Date Picker but using bootstrap icon instead of Zebra icon which is red and i don't like it
Following is my date picking Jquery
$(document).ready(function() {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function () {
$zdp = $('#datepicker-start').data('Zebra_DatePicker');
$('#start').val(zdp);
},
direction: true,
});
});
What I am trying to do is copy entered date into $zdp and set it to the value of input tag whose id is start.
I am new to javascript and jquery kindly guide what I am doing wrong casue this code is not running
I think, you need to use the onSelect handler like
$(document).ready(function () {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function (str1, str2, date, $el) {
$('#start').val(str1);
},
direction: true,
});
});

OnSelect datepicker doesn't work

i've got a probleme with my date picker. I need to custom this datepicker but when i try to custom them it doesn't work.
Example:
I have this html code:
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" data-target="#job-date_start" name="date_start" title="" id="datestart" class="xlarge required" readonly>
<input type="hidden" id="job-date_start" value="" name="job[date_start]" />
</div>
And on javascript i try that:
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
},
});
And my problem is, when i click on a date in my datepicker the console.log(test) don't appear.
Thanks you
Inlcude jquery and jquery ui libraries and then on document ready add your code http://jsfiddle.net/m443no17/
$(document).ready(function () {
$('#datestart').datepicker({
onSelect: function (date) {
alert(date);
},
});
});
Ofcourse , it will work the way you wrote . But , is not needed if you are having only one helper.
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
}
});
Hope you have imported all the libraries required for datepicker and ofcourse jQuery proper version.
FYI :- Your DOM should be ready before you are executing this script

Categories