I would like to use the same JavaScript function for two or more controls.
Is this possible and how?
this is my example:
<script>
$(function () {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
Change your selector to the Class Selector so all the equal classes get affected by the function
<script>
$(function () {
$(".datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="datepicker">
<input type="text" class="datepicker">
Yes you can use a multiple id selector:
$("#datepicker, #datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
Or add a classe and use a selector by class.
You need to add id of all the elements you need to add datepicker to, just like below:
$("#datepicker,#datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
Use a class selector instead of id selector and things should be good.
<script>
$(function () {
$(".selectorname").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="selectorname">
<input type="text" class="selectorname">
Related
I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<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").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>
I have a form with multiple JQuery datepicker fields, but the problem is the first 2 fields only work and the rest not , i searched and found this , but didn't help., here is my code :
$('.datePicker').datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
HTML:
<input type="text" class='datePicker' name='startDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>
<input type="text" class='datePicker' name='endDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>
Try this:
$('.datePicker').each(function(){
$(this).datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
});
This is a follow up to my original post here: Call jQuery datepicker from external file
EDITED:
Added correct jQuery code
I have a group of Perl reports all in one file. Most of the reports require the user to enter either a date or a date range. This would be simple if each report was in its own file, but since it's not, I need a way to call either the range-based datepicker or single date datepicker.
Here is the jQuery code:
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp1",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp2",
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#single").datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
altField: "#forminp1",
changeMonth: true,
changeYear: true,
dateFormat: "yymmdd",
onSelect: function () {
$(this).datepicker.val();
}
});
});
To test, I created an HTML file containing the following:
<p>Double Dates</p>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<!--test the output-->
<p>Output the result</p>
<input type="text" id="forminp1" size="30"> <input type="text" id="forminp2" size="30">
<p>Single Date</p>
<input type="text" id="single">
The datepicker won't attached to any of the ids unless I remove the function targeting the single id.
Is there a way to build the correct datepicker based on the input id?
in the following code
http://jsfiddle.net/KRFCH/24/
<pre>
<input type="text" id="d" />
<div id="z"></div>
pseudo code:
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});
$('#d').click();
$('#d').focus();
I can't get the input box to get the focus?
any ideas how I can make this happen?
just implement onSelect event handler:
$("#z").datepicker({
inline: true,
altField: '#d',
onSelect: function () {
this.focus();
}
});
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.