OnSelect datepicker doesn't work - javascript

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

Related

Bootstrap Datetimepicker Display twice

I am getting the problem to display datetimepicker. i got the datetimepicker twice when i click id of shankar. I mentioned the screenshot below
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
$('#shankar').datetimepicker();
This code will help you:
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datepicker('show').on('changeDate',function(ev){
$('.datetimepicker').hide();
});
});
</script>
Please check , if you have defined a custom editor Templates for DateTime, and setting the class .datepicker there. its possible you are doing explicit duplicate initialization of calender control.
As you are using bootstrap ,bootstrap-datepicker.js initializes the all nodes which has .datepicker class without explicit instruction.
Remove the explicit initialization in your function.
source
You can try:
setTimeout(function(){
$('.dpdatetimepicker').datetimepicker({
startDate: new Date(start_date),
todayBtn: "linked",
orientation: "bottom auto",
daysOfWeekHighlighted: "5",
todayHighlight: true,
autoclose: true
});
},1000);

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,
});
});

how to make a bootstrap datepick button

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

Use jquery timepicker and datepicker simultaneously

I need to use both timepicker and datepicker. But only one of them works. My code is mentioned below. I am using multiple jquery files.
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
</script>
Date : <input type="text" class="datepicker"/>
Time : <input type="text" class="timepicker"/>
Check Timepicker with Datepicker This one plugin has both pickers as a single component.
I used https://github.com/trentrichardson/jQuery-Timepicker-Addon
<link href="yourpath/jquery-ui-timepicker-addon.css'?>" rel="stylesheet" media="all">
<script src="yourpath/jquery-ui-timepicker-addon.js'?>"></script>
$(function() {
$( ".datepicker" ).datepicker();
});
$(function() {
$(".timepicker").timepicker();
});
and html
input type="text" name="date" value="" placeholder="Conference Name" id="datepicker"
input type="text" name="start_time" value="" placeholder="Starting Time" class="timepicker"
input type="text" name="end_time" value="" placeholder="Ending Time" class="timepicker"
it works for me.I think its jquery version problem
Make sure the library is loaded from CDN http://cdnjs.com/libraries/jquery-ui-timepicker-addon
Once the js and CSS are loaded successfully, you can use the plugin as per examples given in httpp://jonthornton.github.io/jquery-timepicker/. I used the following options to get AM/PM selector;
$('input.timepicker').timepicker({controlType: 'select',
timeFormat: 'hh:mm TT',
dropdown: true,
scrollbar: false,
ampm: true});
For detailed options list refer to httpp://timepicker.co/options/
2 links have httpp instead of http cz SO wouldn't allow me to post many links in one answer.

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

Categories