after we've updated our pickadate from 3.5.4 to 3.5.6 the picker does not open on click. We are using the Date and the Time pickers, none of them shows up.
We're using different selectors like:
var options = {
format: 'HH:i',
editable: true,
interval: 30,
};
$('.worktime').pickatime(options);
or
$('#datepicker').pickadate({
labelMonthPrev: 'letzter Monat',
labelMonthNext: 'nächster Monat',
monthsFull: moment.months(),
weekdaysFull: moment.weekdays(),
weekdaysShort: moment.weekdaysShort(),
// Buttons
today: 'heute',
clear: '',
close: 'schließen',
// Formats
format: 'dd.mm.yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// other
firstDay: 1,
selectYears: 4,
editable: true,
});
Even if I run the code above in the console, it doesn't work. Only the following shows the picker:
var picker = $('#datepicker').pickadate('picker')
picker.open()
After Version 3.5.4 the pickadate plugin is not binding any events when passing the "editable: true" parameter. We've had to bind the click and focus by ourselves in the new Version.
If your only change was the update Pickadate.js from 3.5.4 to 3.5.6, then open a ticket at https://github.com/amsul/pickadate.js/issues and fall back on 3.5.4.
event.stopPropagation() fixed it for me too
Related
I've implemented the fullCalendar in week view. I have added few events in it. Now I am trying to duplicate those events in other weeks, on click of some external button. Follow is the screenshot of currently implemented fullcalendar:
As you can see that there is a button of duplicate, on top-right corner of fullcalendar. On click of it I need to get all the event of the week that is being displayed in this week.
Following is how I have initialized the fullcalendar:
$('#calendar').fullCalendar({
header: {
left: options["is_staff"] == true ? 'today prev,next' : '',
center: '',
right: '',
},
firstDay: 0,
editable: true,
selectable: true,
defaultView: 'agendaWeek',
weekNumbers: true,
eventOverlap: false,
events: events_data
})
Following is my script for button click:
$("#dup-week-schedule").click(function(){
var currentWeek = $.fullCalendar.formatDate($('#calendar').fullCalendar('getDate'), "W");
var currentWeekArray = [];
var currentWeekTitleArray = []; $.each($('#calendar').fullCalendar('clientEvents'), function(i,v){
if ((v['start'].isoWeek()) == currentWeek){
currentWeekArray.push(v);
currentWeekTitleArray.push(v['title']);
}
});
}
The issue is according the fullcalendar that is displayed in image, 22/04 should be included in current week. But it is being excluded from current week and the next sunday is being included in current week.
I'm using FullCalendar 3.2.0. When I go to the agendaDay view and click on a time slot, a new event is created automatically with a 30-minute duration by default. How can I have access to this event from the dayClick callback, so I can change its duration?
I'm implementing a page where you have a form that defines the duration of the event. You put the number of hours the event is going to last in an input and then you click on the agendaView of the calendar to create the event. In the dayClick callback, I get the start of the event and add to it the duration that was put in the input, then I render the event in the calendar. The result is that I get my rendered event overlapped by the automatically created one, like this:
I have to click outside the calendar to make the event disappear. I would like to prevent the automatic creation of the event in the first place or be able to change its duration when it is created and make it permanent, so it doesn't disappear when I click outside of the main calendar frame.
Here's my code:
$('#calendario').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
selectable: true,
selectHelper: true,
dayClick: function(day, evto, view) {
var txtDuration = $('#duration');
var hoursOrDays = $('#hoursOrDays');
if (view.name === "agendaDay") {
// Here, is it possible to get a reference to the automatically created event and change its end date,
// instead of creating a new one and rendering it?
createEvent('Available', day, calculateEndDate(day, parseInt(txtDuration.val()), hoursOrDays));
}
},
editable: true,
eventLimit: true
});
function createEvent(text, start, end) {
var calendario = $('#calendario');
var evento = {
title: text,
start: start,
end: end,
durationEditable: false,
resourceEditable: false
};
calendario.fullCalendar('renderEvent', evento);
}
function calculateEndDate(start, duration, hoursOrDays) {
var unit = hoursOrDays === 'D' ? 'days' : 'hours';
return start.clone().add(duration, unit);
}
Thanks for your help!
I've inherited an application that uses ExtJS and am relatively unfamiliar with it's conventions.
I have a select box for time entry that defaults to a time passed in. Is it possible to set selected = selected for the value it defaults to? Currently the default time is displayed, but when you click on the box the list of options defaults to the first value (So if the default it 2pm, when you click to select an alternative time you are taken to 12am not 2pm).
The code:
{
xtype: 'timefield',
id: 'timeselect',
name: 'starttime',
fieldLabel: 'Start Time',
labelWidth: 80,
labelAlign: 'right',
width: 160,
minValue: '12:00 AM',
maxValue: '11:55 PM',
value: MyApp.config.AppConfig.time, //Current time rounded to hour
increment: 15
},
Thanks!
Edit: To clarify. The select box shows the correct time when the page loads. But when the user clicks on the select, they are taken to the start of the option list (12:00 am in this case). I'm hoping to have the option list default to the time selected (similar to ). Thanks!
Edit #2: The application uses v4.0.7
The solution is simple then: upgrade your version of Ext! Not that simple? Patch it in the meanwhile. I must confess that I tried to copy the code of the v4.2 of Ext.form.field.Time into the fiddle. That didn't work. Here's a cleaner approach:
Ext.define('Ext.ux.fix.Ext.form.field.Time.CurrentSelectionOnExpand', {
override: 'Ext.form.field.Time'
,initComponent: function() {
this.callParent();
this.on({
scope: this
,delay: 1 // let render
,expand: function() {
this.highlightCurrent();
}
});
}
// copied from Ext.view.BoundListKeyNav.method#highlightAt()
,highlightCurrent: function() {
var me = this,
picker = me.picker,
index = picker.store.find('disp', me.getRawValue()),
item = picker.all.item(index)
if (item) {
item = item.dom;
picker.highlightItem(item);
picker.getTargetEl().scrollChildIntoView(item, false);
}
}
});
I been using jquery-ui for my project, lately i found there is a bug in datepicker widget that doesn't take selected date if the date-range is not the current year. take a look at this example . But if you change the year and select some date it takes the correct value. I know there is BUG ticket in jquery they'll solve on next version v.1.11 bcoz jquery ui is big js i am little paranoid to go into the file and modify it. Is there hack or possible solution that i can use now
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true
});
A hackish workaround is to explicitly set the defaultDate to the one which is shown by the datepicker when it is opened; or to some other reasonable default value:
var defaultDate = new Date();
defaultDate.setHours(0, 0, 0, 0);
defaultDate.setYear(defaultDate.getYear() - 100);
console.log(defaultDate); // current month, current date, current year - 100
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true,
defaultDate: defaultDate
});
Demo here
Check this works
FIDDLE DEMO
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var selectedYear = d.setFullYear(parseInt($('.ui-datepicker-year :selected').text())); // selected year
$('#test').val([d.getMonth()+1, d.getDate(), d.getFullYear()].join('/'));
}
});
Is there any jQuery datepicker plugin to display as Buddhist date?
Currently I use the jQuery UI datepicker to display it, but it's not actually I want. Here is the code:
$(document).ready( function() {
$("#datepicker").datepicker( {
appendText: ' yyyy-mm-dd',
autoSize: true,
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
showOn: 'both',
onSelect: function(dateText, inst) {
year = dateText.substring(0, 4);
month = dateText.substring(5, 7);
day = dateText.substring(8);
_year = parseInt(year) + 543 + '';
$(this).val(_year + '-' + month + '-' + day);
},
beforeShow: function(input, inst) {
year = input.value.substring(0, 4);
month = input.value.substring(5, 7);
day = input.value.substring(8);
_year = parseInt(year) - 543 + '';
$(this).datepicker("setDate", new Date(_year, month - 1, day, 0, 0, 0, 0));
}
});
});
What I want is when #datepicker has no value, the calendar pop up is displaying the current date + 543 years. When #datepicker has a value, the calendar pop up is displaying the date in the #datepicker value.
The problem is when the selected year is a leap year, for example, 2008-02-29 AD is valid but we can't display 2551-02-29 (Buddhist date) (which is the same date) on that pop up.
Update 2010-07-30
According to Add support for Thai year format in datepicker module and Datepicker: Support non-Gregorian calendars it seems they plan to create support for non-Gregorian calendars.
Currently I try to use the plugin jQuery Calendars by Keith Wood.
You can find my modified version of jQuery DatePicker here:
http://www.anassirk.com/articles/1
The blog is in Thai so I'll briefly explain it below:
Download the plugin here:
http://www.anassirk.com/files/DatePicker.zip
The usage is quite similar to the standard jQuery DatePicker with one extra boolean option named "isBuddhist" which you can set it to true to render the Buddhist calendar.
$("#datepicker-th").datepicker({ dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay });
important: in Buddhist mode you have to set the "defaultDate" option to a date string of the format specified in the "dateFormat" option. Like '19/3/2554' for 'dd/mm/yy'
Cheers!
I've created plugins for jQuery UI datepicker to make it support the Buddhist Era format.
More details in jQuery UI datepicker extension for the Buddhist era