I'm using a custom JS library called datepicker, that you can find here.
I have it set up and working, but I need some extra functionality from it, and I have absolutely no idea how to get it done.
Here's what I have so far:
<h:panelGroup>
<h:panelGrid>
<input id="depatureDate" value="Departure date" class="datepicker dp1"></input>
<script>
$(".datepicker, dp1").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
<h:panelGrid id="returnDate">
<input value="Return date" class="datepicker dp2"></input>
<script>
$(".datepicker, dp2").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
</h:panelGroup>
What I need to do is the following:
If the first datepicker's input is clicked and a date is selected, that datepicker needs to close(it's already doing this, so that's fine) and the second datepicker needs to open, with the date that was selected in the first one marked on it. The user must then select another date on the second datepicker
If anyone has any idea how to do this, advice and pointers would be more than welcome!
Okay, i've done a small example here, working with the close event.
<input type="text" class="datepicker1" />
<br />
<input type="text" class="datepicker2" />
<script type="text/javascript">
// init second picker
var $input = $('.datepicker2').pickadate();
// init first picker
$('.datepicker1').pickadate({
// handle close event
onClose: function() {
var picker = $input.pickadate('picker');
// set unix timestamp to the second picker
// maybe theres a better solution for this...currenlty it works
picker.set('select', this.component.item.select.pick );
picker.open();
}
});
</script>
dont forget to load all pickadate libraries and jquery.....
i've defined 2 divs with classed datepicker1 and datepicker2. then i'm creating
the datepicker objects. the datepicker1 object handles the onClose event.
When the first datepicker is closed, the scripts opens the second and sets the value of datepicker1...
hope this helps
cheers
the datepicker provides an close event, maybe you can use this? Take a look at the API here
http://amsul.ca/pickadate.js/api.htm#method-on
some lines further down, you find
$('.datepicker').pickadate({
onOpen: function() {
console.log('Opened up!')
},
onClose: function() {
console.log('Closed now')
},
onRender: function() {
console.log('Just rendered anew')
},
onStart: function() {
console.log('Hello there :)')
},
onStop: function() {
console.log('See ya')
},
onSet: function(event) {
console.log('Set stuff:', event)
}
})
when entering the close event, open a new datepicker and set default value of the currently closed.
Related
I am trying to make a button only datepicker with jQuery dtaepicker.
When I am attaching the datepicker to an input, the onchange function works and I got the new selected value.
However when I am attaching the datepicker with just a button or something else, the onchange event is not getting fired:
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});
I think you need to add this line showOn: 'button'
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
showOn: 'button', // use showOn: 'both' if you want to open the datepicker on icon and the input as well
format: 'yyyy-mm-dd',
onSelect: function(v) {
// This would get fired on changing date on the calendar icon
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});
Also, you can remove the <i class="fa fa-calendar test"></i> tag and place the following two LOC after the showOn attribute to show the calendar icon
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
Use the hide event - it gets fire after you finish inserting or picking a date:
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("hide", function(e) {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});
You can try the answer here.
You should be able to call the datepicker change from the button click event
I have found it:
$(".test").datepicker(params).on('hide', v => console.log(v.date));
// will return a date object with the selected date
I want to call a function whenever user changes date in a datepicker but it is not working. I have already checked link for Question JQuery Datepicker onchange event help! but it didnt help.
Below is my code and what i have tried:
<h:inputText id="animalBornDateId"
value="#{myController.animalBornDate}"
styleClass="dtp dateClass" style="width: 80px !important;" >
</h:inputText>
What i tried:
$("#animalBornDateId").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
}
});
Another:
$('#animalBornDateId').on('input',function(e){
alert('Changed!')
});
The below works when i manually enter date inside textbox and click tab which i dont want.
$('#animalBornDateId').change(function() {
alert("test");
});
I want to call alert function when i select date from the calendar
I'm looking for a way of moving from one Calendar to the next once the user has selected a date e.g:
User picks dateFrom
Automatically close dateFrom calendar and show dateTo version
I feel like I'm close to a solution but the dateTo calendar pops up and then disappears instantly, I'm hooking into the onSelect function of the calendar and when the inst is the dateFrom calendar, then i call .focus() on the dateTo text box e.g:
$('.datepicker > input').datepicker({
// snip.....
onSelect: function (dateText, inst) {
var type = $('#' + inst.id).data('calendar');
if (type === 'date-from') {
$('.js-hook--date-to').focus();
}
}
});
Markup:
<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateFrom" runat="server" placeholder="CHECK IN" data-calendar="date-from" />
</div>
</div>
<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateTo" runat="server" CssClass="js-hook--date-to" placeholder="CHECK OUT" data-calendar="date-to" />
</div>
</div>
This causes the next Calendar to pop up but it then disappears, is there an easy way to achieve this?
Edit*
I've also tried using .datepicker("show"); with no success.
2nd Edit*
jsFiddle to demonstrate
Use a short delay before triggering the focus.
onSelect: function(dateText, inst) {
var type = $('#' + inst.id).data('calendar');
if (type === 'date-from') {
setTimeout(function() {
$('.js-hook--date-to').focus();
}, 50)
}
}
As mentioned in comments the plugin only uses one container for all instances.
I think what is happening is since the first instance hasn't quite closed and cleaned up when you trigger the focus, the new instance is getting hidden from event in first
I arbitrarily set the delay and didn't play with it much to see what is best.
DEMO
I managed to do this using onClose and checking if a date was selected with getDate:
onClose: function (dateText, inst) {
var picker = $('#' + inst.id);
var type = picker.data('calendar');
var date = picker.datepicker('getDate');
if (type === 'date-from' && date !== null) {
$('.js-hook--date-to').focus();
}
}
I have Bootstrap datepicker with default format mm/dd/yyyy, and I have select where I can change
format from mm/dd/yyyy to dd/mm/yyyy and reverse.
On select change I want to my datepicker change format.
I tried
find('#options-date_format').on('change', function(){
$("#picker").datepicker({format: formatDate})
});
but It's not working, and I can't find way of doing this.
Also tried to remove / destroy datepicker but I got javascript error.
I think the below approach is working,
1, Whenever changing the format, de-attach and then re-attach back to the element.
$("#dp3").datepicker(); // initialization
$('select').on('change', function () {
var d = $('select option:selected').text();
if (d == 2) {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "dd/mm/yyyy"
})
} else {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "mm/dd/yyyy"
})
}
});
JSFiddle
Ok I resolve this extending bootstra-datepicker.js
setFormat: function(format) {
this.format = DPGlobal.parseFormat(format);
}
And call that function
find('#options-date_format').on('change', function(){
$("#picker").datepicker('setFormat', newFormat);
});
When you have many date pickers, the you can use a class selector and reset all of them, and initialize using the class. Code sample below.
In the example, all the input elements will have the class date-picker
function resetDatePickers(){
$('.date-picker').each(function(index){
$(this).datepicker('remove');
});
$('.date-picker').datepicker({
format: "dd/mm/yyyy",
startView: 2,
orientation: "top auto"
});
}
resetDatePickers();
I am using a Jquery Timepicker .
I have two input fields - to Accept times .
<input id="startTime" size="30" type="text" />
<input id="endTime" size="30" type="text" />
I am using a Jquery UI timer as per documentation
$('#startTime').timepicker({
'minTime': '6:00am',
'maxTime': '11:30pm',
'onSelect': function() {
//change the 'minTime parameter of #endTime <--- how do I do this ?
}
});
$('#endTime').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});
I want that when the first timePicker is selected , the 'minTime' parameter for the second gets changed . Basically I am trying to collect the start time and end time for certain activity . And I want that the second input box shows the options from the value of the first input field (start time ) itself .
You would do something like this,
$('#startTime').timepicker({
'minTime': '6:00am',
'maxTime': '11:30pm',
'onSelect': function() {
$('#endTime').timepicker('option', 'minTime', $(this).val());
}
});
What you are doing here is that in the onSelect function of the #startTime, you set the option minTime of #endTime to the value of #startTime
See this JS Fiddle.
You can go for onchange event:
$('#startTime').timepicker();
$('#endTime').timepicker({
'minTime': '12:00am',
'showDuration': true
});
$('#startTime').on('changeTime', function() {
$('#endTime').timepicker('option', 'minTime', $(this).val());
});
I modified the code a bit posted in first reply here is the working fiddle for it http://jsfiddle.net/NXVy2/215/
You can use on('change'... too
$('#startTime').on('change', function() {
$('#endTime').timepicker('option', 'minTime', $(this).val());
});
jQuery-UI widgets generally support an options method that allows you to change the options on an existing instance. Widget methods are called by supplying a string as the first argument to the plugin call:
$(...).widget_name('method_name', arg...)
so this should work for you:
$('#endTime').timepicker('option', 'minTime', new_min_time)