I've a problem to open the timepicker of pickadate.js
I've tried to open it with the code below but it doesn't works for me.
I get an error : "picker.open() is not a function".
this my js code :
$('.timepicker').pickatime({
default: 'now', // Set default time
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: false, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: true, // automatic close timepicker
ampmclickable: false // make AM PM clickable
});
$('#test').click(function () {
event.stopPropagation();
event.preventDefault();
var picker = $('.timepicker').pickatime('picker');
picker.open();
});
A weird thing : I tried to open a pickadate object with the same method and it works perfectly ..
Do you have a solution to avoid it ?
thanks for helping
Haven't quite figured out why, but for me the following works:
Instead of
picker.open();
do
picker.data('clockpicker').show();
Hope that helps!
It's too late to answer but it will help others.
var picker = $('.timepicker').pickatime({
default: 'now', // Set default time
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: false, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: true, // automatic close timepicker
ampmclickable: false // make AM PM clickable
});
$('#test').click(function () {
event.stopPropagation();
event.preventDefault();
// var picker = $('.timepicker').pickatime('picker');
picker.open();
});
reference
Related
I realize a site in symfony and I use the flatpickr library for the selection of dates. that's what it's like now:
datepicker
So I have 2 datepicker who uses flatpickr which allows me to select a departure date with the time and a date back with the time too. My problem, when I select the first date, flatpickr shows me well the time selection but when I go on the second datepicker I can not select the time.
datepicker 1
datepicker 2
I wish I could select in the 2 inputs the date and the time.
Here is my JS code of my 2 inputs:
var departure = $('#quick_booking_departure');
var arrival = $('#quick_booking_arrival');
departure.flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
position: "above",
disableMobile: true,
locale: "fr",
minDate: "today",
onChange: function (selectedDates, dateStr, instance) {
arrival.flatpickr({
minDate: dateStr
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
arrival.flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
position: "above",
disableMobile: true,
locale: "fr",
minDate: "today",
onChange: function (selectedDates, dateStr, instance) {
departure.flatpickr({
minDate: 'today'
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
Thank you for your help.
It looks like your onChange function is the culprit adding enableTime: true allows time pick:
onChange: function(selectedDates, dateStr, instance) {
arrival.flatpickr({
enableTime: true,
minDate: dateStr
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
But look closer, when one of your pickers change you are completely re-initializing the other. So all the options you originally defined are getting reverted back to default except for what you are re-defining minDate
Requirements - End date must be equal and greater then start selected start date in boostrap datepicker and before selected start date disable.
Problem - its possible in jquery date but I want to know how to make in boostrap date.
my boostrap code is
$('#start_date').datepicker({autoclose: true,startDate: new Date()});
$('#end_date').datepicker({autoclose: true,startDate: new Date()});
for reference check jquery code
Fiddle
Note - I want exact implemention of this picker in bootstrap
Can anyone help me?
Please check out this JSFiddle demo. I have placed the code below that uses bootstrap datepicker.
$(".from_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var startDate = new Date(selected.date.valueOf());
$('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
$('.to_date').datepicker('setStartDate', null);
});
$(".to_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var endDate = new Date(selected.date.valueOf());
$('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
$('.from_date').datepicker('setEndDate', null);
});
I have a page in which I have a date field and a CKeditor textarea(which creates an iframe at the textarea place) . On date picker I have defined a blur function to check date validity, which works correctly.
However, the issue is when I click on a datepicker field the calendar popup gets generated then I enter a invalid date and then click on inside ckeditor , the calendar remains open however focus gets lost but still the blur function doesn't get called. Hence invalid date goes to server. (I need client side validation for this date field) .
$(function(){
$(".dateClass").datepicker({
changeMonth : true,
changeYear : true,
yearRange: "-10:+10",
dateFormat : "dd/mm/yy",
buttonText : "Choose",
showOtherMonths : true,
selectOtherMonths : true
});
$(".dateClass").blur(function(){
if(this.value!=undefined && this.value!=null && this.value.replace(/^\s+|\s+$/g, '')!=''){
if(!isDateValid(this.value) && calendarOpen==0){
alert('Please enter a valid date in dd/mm/yyyy format');
this.focus();
}
}
});
});
CKeditor is actually embedding an iframe in the page.
How do I call blur function when user clicks on date field and then on iframe ??
thnx I got it to work by doing a way around
document.onfocusout = function(e){ //for IE8 and lesser
if( e === undefined ){
//keeping validations here
}
}
$(window).blur( function(e){ //for other browsers –
if( e !== undefined ){
//keeping validations here
}
}
Use onSelect for your required situation as
$(".dateClass").datepicker({
changeMonth : true, changeYear : true,
yearRange: "-10:+10", dateFormat : "dd/mm/yy",
buttonText : "Choose", showOtherMonths : true,
selectOtherMonths : true ,
onSelect: function(dateText, inst) { var date = $(this).val(); var time = $('#time').val(); alert('on select triggered');
}
});
Sorry for unformated code.
Hope it will help
http://forum.jquery.com/topic/jquery-datepicker-onblur
I am creating a date picker field dynamically. I need to set the picker field value to a textfield. somehow i am unable to retrieve the picker value. The date picker is displayed but the done button is throwing an error saying "Cannot call method "Todatestring" of undefined.
My code is :
case 'date':
var cmp1 = Ext.create('Ext.Button', {
text:'Date:',
ui:'plain',
id:'datepicker',
handler:function () {
var datePicker = Ext.create('Ext.picker.Date', {
dateFormat:'Y-m-d',
id:'picker1',
doneButton:{
listeners:{
// when the done button is tapped, set the value
tap:function (button, event, eOpts) {
console.log('inside done button');
console.log(Ext.getCmp('picker1').getValue());
/* var picker = this.up('datepicker');
picker.fireEvent('change', picker, picker.getValue());*/
console.log('done button');
}
}
}
});
Ext.getCmp('overlayId').add(datePicker);
datePicker.show();
Ext.getCmp('datefield').setValue('');
}
});
Ext.getCmp('overlayId').add({ xtype:'container', padding:10, items:[cmp1] });
var cmp = Ext.create('Ext.field.Text', {
//label:'Date:',
id:'datefield',
listener:{
focus:function () {
console.log('on blue function called');
}
}
});
break;
I think you do not need to override the setValue() function direct. Better approach is to override the applyValue() or/and updateValue() functions.
See http://docs.sencha.com/touch/2-0/#!/guide/class_system for more information about config properties and how apply/update/set pattern does work
Cheers, Oleg
i know its late, but help somebody later, you can use change listener to get selected date value dynamically
datePicker = Ext.create('Ext.picker.Date', {
itemId:'ctsdateselect',
value: new Date(),
yearFrom: 1985,
yearTo : 2050,
listeners: {
change: function (value, eOpts) {
console.log(eOpts);
},
cancel: function (picker) {
Ext.Msg.alert('You hit cancel', '');
}
}
});
datepicker.show();
I had the same problem and it got fixed by setting value config for the datepicker.
To get the new value you actually need to have some initial value. Check this.
I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.
Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.