jquery ui datepicker not setting dynamically - javascript

i am trying to set mindate dynamically on pageload event and dropdown change event also , mindate sets in page load but when i am trying to set on change event it gives error
this is my code
//basic initialization of datepicker
$('#transaction_date').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
maxDate: 'today',
inline: true
});
var fy_start_date = '<?php echo $fy_start_date;?>';
// call function to set mindate on pageload
setmindate(fy_start_date, 0);
// dropdown change event to call ajax function to set ne mindate value
$('#from_ledger').change(function(){
var accstartdate = $('#from_ledger').val();
getstartdate(accstartdate);
});
// dropdown change event to call ajax function to set ne mindate value
$('#to_ledger').change(function(){
var accstartdate = $('#to_ledger').val();
getstartdate(accstartdate);
});
//ajax function to set new mindate
function getstartdate(id){
//call function to set new mindtae
setmindate(result, 1);
}
//function to set mindate
function setmindate(min_date, change) {
var minumum_date = min_date;
$('#transaction_date').datepicker('destroy');
$('#transaction_date').datepicker('option', 'minDate', minumum_date);
}
});
it gives error message Error: cannot call methods on datepicker prior to initialization; attempted to call method 'destroy'
jquery version 1.11.1
jquery ui version 1.11.4

Related

JQuery-UI Datepicker() click Done programmitally

Does anybody know how I can trigger the datepicker to fire its onClose() function as if the user made the selection and clicked the Done button?
Maybe I'm looking in the wrong place but I cannot seem to find a way to fire an event that mimics the user selecting the datepicker and clicking on the Done button.
Here's my scenario: I want the date to change when users select an option button. If the user selects the option "YEAR" then #StartDate changes to Jan 2016 and #EndDate changes to Dec 2016. If the user selects the option "MONTH" then #StartDate changes to Jan 2017 and #EndDate changes to Jan 2017.
There are max and min and other requirements handled in the initModule for both datepickers that only get executed when the user selects the datepickers, changes these dates, and clicks on the Done button. I want to fire these events without the user having to manually change the dates.
In my initModule method:
// ----------------Begin Public Methods----------------------------//
var initModule = function () {
var currYear = new Date().getFullYear();
// Hookup datepickers
$(#EndDate).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: new Date(2013, 9, 1),
maxDate: '-1d',
beforeShow: function () {
setTimeout(function () {
$("#ui-datepicker-div").addClass('calendar-off');
}, 0);
},
onClose: function () {
var month = $(#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $(#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate' new Date(year, month, 1));
onChangeEndDate();
}
});
.
.
.
.
.
};
return { initModule: initModule };
So, I've tried $("#EndDate").click('onClose'); and $("#EndDate").trigger('onClose'); and I've poked around everywhere to find an answer to no avail.
How to I get execution into the onClose: function () without the user having to manually change the date in the datepicker and select the Done button?
According to the API documentation, the hide() method will close the datepicker.
So, if you want to close the datepicker, you should do
$(#EndDate).datepicker( "hide" );

jQuery datepicker not working on dynamically inserted html element

This same question has been asked repeatedly, and the only time it has been answered is the one where the fellow was trying to initialise datepicker in the .onReady() function. I am not doing that. In fact, I am actually doing what that solution is doing; implementing datepicker immediately after creating the element.
Here is my template code:
<input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16>
You will notice the month-picker class. Also, you will notice the "XXX" placeholders.
Here is the code that inserts that template code:
//
// find the next available id
//
for (var i = 0; ; i++) {
if (!$("#divEmployer_" + i.toString()).length) {
break;
}
}
//
// get html, and replace the placeholders with id, then append.
//
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
});
//
// activate datepicker on all month-picker class elements
//
$('.month-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
//alert("here");
I do see the "here" alert if I uncomment it, so I know the code is being run.
The datepicker() throws no error.
I know the function is available because if I comment out my jquery-ui-min.js in my <HEAD>, a reference to datepicker() does then throw an error.
But the field does not respond when it receives focus. The datepicker does not appear.
Can anyone tell me what's wrong? Thanks!
You are trying to instantiate the datepicker before the element exists. Put that code inside the async callback.
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
// PUT DATEPICKER HERE
});

Backbone qunit testing: trigger onSelect event on date picker?

I'm trying to write my first qunit tests using my jquery date picker module, right now I want to trigger the onSelect method I am using but this doesn't seem to get picked up in the tests, here is my simple test:
JS
this.dateSelectorView.$el.on('onSelect', function() {
assert.ok(true, 'true succeeds');
});
Here is the date picker:
this.$el.datepicker({
dateFormat: Common.DATE_FORMAT,
showOtherMonths: true,
selectOtherMonths: true,
beforeShowDay: function (date) {
return _.availableDates(date, Common.availableDates);
},
onSelect: function() {
Backbone.Events.trigger('date:selected', this.value);
}
});
Listen to the view itself,
when invoking the date picker, trigger the event to the view
onSelect: _.bind(function() {
this.trigger('date:selected', this.value);
},this)
I use "bind" to expose the outer scope(the view)
Then, in your View creating the the datepicker, listen to the change event.
this.listenTo(this.dateSelectorView, 'date:selected', this.callback);

2 Bootstrap Datepickers: How to change min and max dates?

I have 2 datepickers on my webpage: One for the arrival date and the other for departure.
Now I'd like to set the min and max dates, according to the user selection.
2 Examples of what I want to achieve:
User selects 29.03.2015 as arrival -> departure's min date is set
accordingly.
User selects 29.03.2015 as departure -> arrival's max
date is set accordingly.
At the moment I am initializing the datepickers like so:
var startDate = "<?php echo date('d.m.Y'); ?>"; // Today
$('#startDate.input-group.date').datepicker({
format: "dd.mm.yyyy",
language: "de",
multidate: false,
todayHighlight: true,
startDate: startDate,
weekStart: 1
}).on('changeDate', function(e){
changeDate(e);
});
$('#endDate.input-group.date').datepicker({
format: "dd.mm.yyyy",
language: "de",
multidate: false,
todayHighlight: true,
startDate: startDate,
weekStart: 1
});
You notice the .on() function on the first datepicker. This is my current attempt to set the date of the 2nd one:
function changeDate(e){
$('#endDate.input-group.date').datepicker('setStartDate', e);
}
However this leaves me with the following error:
Uncaught TypeError: undefined is not a function: bootstrap-datepicker.js:1493
The line in question is this:
parts = date.match(/([\-+]\d+)([dmwy])/g)
Can you please give me a hint on what I am doing wrong and on how I can achieve said effect?
if you console.log changing like this:
.on('changeDate', function(e){
console.log(e);
});
you'll see the event returns an event object;
you should try passing something like e.date (but be sure to format the string accordingly to your startDate format).
Here's more about the extra data attached to the event object : http://bootstrap-datepicker.readthedocs.org/en/latest/events.html

Multiple datepicker using Pikaday

Im using Pikaday as a datepicker because JQuery Datepicker is having conflict with Prototype Library.
A few issues here.
How do i use pikaday datepicker in multiple text box
How to format the date. Previously by using JQuery Datepicker, to change the format I only need to
add dateFormat:"dd M yy",
Here is the sample code
<input type="text" id="datepicker">
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday(
{
changeMonth: true,
changeYear: true,
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020]
});
</script>
I guess you're looking for a way to have pikaday work together for a date range type of thing and then manipulate the last one according to the date you selected in the first on?
...
I realize this is a bit late but perhaps someone else is interested in an answer:
Pikaday does not offer anything inhouse here but I was able to work around this by destroying the instance and creating it again when a day has been picked in the "from" picker.
HTML:
From: <input type="text" name="from" id="from">
To: <span id="toField"><input type="text" name="to" id="to"></span>
Javascript:
function dateRange() { //destroy to field and init with new param
var picker = new Pikaday({ field: document.getElementById("from") });
if(picker.toString()) {
$("#to").pikaday('destroy');
$("#to").remove();
$("#toField").html('<input type="text" name="to" id="to">');
$("#to").pikaday({ //should have the same param as the original init
format: "YYYY-M-DD",
minDate: moment(picker.toString(), "YYYY-MM-DD").toDate()
});
}
}
$(function() { //pikaday init
$("#from").pikaday({
format: "YYYY-MM-DD", //adjust to your liking
minDate: moment().subtract({days: 1}).toDate()
});
$("#to").pikaday({
format: "YYYY-MM-DD",
minDate: moment().subtract({days: 1}).toDate()
});
});
PS: don't forget to include your jquery, pickaday and moment js files...
Hope it helps
In case this stumps anyone else - you need to actually trigger the code in #Dominik's answer once a date has been selected, using the "onSelect" trigger. My code has ended up like this (because I'm using the jquery plugin version throughout in a UK format):
var dateFormat = "DD/MM/YYYY";
function dateRange() { //destroy to field and init with new param
var $from = $("#from").pikaday({
format: dateFormat,
});
if($from.val()) {
$("#to").pikaday('destroy');
$("#to").remove();
$("#toField").html('<input type="text" name="to" id="to">');
$("#to").pikaday({
format: dateFormat,
minDate: moment($from.val(), dateFormat).toDate()
});
}
}
$("#from").pikaday({
format: dateFormat,
minDate: moment().subtract({days: 1}).toDate(),
onSelect: dateRange
});
$("#to").pikaday({
format: dateFormat,
minDate: moment().subtract({days: 1}).toDate()
});
I realize this is not quite an answer to the op question, but if it's preferable to select a date range using one control, this is the method I'm using:
var cal = document.getElementById('datepicker');
var picker = new Pikaday({
onSelect: (function() {
var init = true,
start,
end;
return function(date) {
if (init) {
start = date;
picker.setStartRange(date);
picker.setEndRange(null);
rangeClear();
} else {
end = date;
picker.setEndRange(date);
rangeSet(start, end);
}
picker.draw();
init = !init;
}
}())
});
cal.appendChild(picker.el);
Where the rangeSet and rangeClear functions would exist elsewhere with the following signatures:
function rangeSet(start, end) {
//do something with the start and end dates
}
function rangeClear() {
//clear the start and end dates
}
You can see this working here: http://codepen.io/cshanejennings/pen/OMWLLg
The following is my Javascript (without jQuery) solution for From and To datepickers using Pikaday. It's working in Chrome and Firefox, but it does not work in Chrome-Android.
var nowDT = new Date();
var nowDTStr = nowDT.toShortDate();
var sin = document.createElement('input');
sin.setAttribute('type', 'text');
sin.setAttribute('id', this.id + "_cp_sin");
sin.style.width = '20%';
sin.style.cssFloat = 'left';
this.controlPanel.appendChild(sin);
this.sinPika = new Pikaday({
field: sin,
firstDay: 1,
minDate: new Date('2001-01-01'),
maxDate: new Date(nowDTStr),
yearRange: [2001, nowDT.getFullYear()]
});
this.sinPika.setDate(nowDTStr);
var ein = document.createElement('input');
ein.setAttribute('type', 'text');
ein.setAttribute('id', this.id + "_cp_ein");
ein.style.width = '20%';
ein.style.cssFloat = 'right';
this.controlPanel.appendChild(ein);
this.einPika = new Pikaday({
field: ein,
firstDay: 1,
minDate: new Date('2001-01-01'),
maxDate: new Date(nowDTStr),
yearRange: [2001, nowDT.getFullYear()]
});
this.einPika.setDate(nowDTStr);
Since I have sinPika and einPika objects added as members to my class, they're accessible elsewhere in my class in other methods, where Pika objects are used to fetch the dates set by users. Only thing is that this solution is not working in Chrome-Android for me. Could anyone try and let me know what you find?
Thanks!
Edit
I found the problem why Pikaday wasn't working on chrome-android for me. The reason is that the pikaday.js (https://github.com/dbushell/Pikaday/blob/master/pikaday.js) is different from the one here http://dbushell.github.io/Pikaday/, in that the difference lies in attaching the mousedown, touchend events. Pikaday.js on github attaches like this:
addEvent(self.el, 'ontouchend' in document ? 'ontouchend' : 'mousedown', self._onMouseDown, true);
(I think, Javascript defines touchend not ontouchend, may be, this is the reason why Pikaday.js from github repo does not work.)
And the one on dbushell.github.io/Pikaday attaches like this:
addEvent(self.el, 'mousedown', self._onMouseDown, true);
Using the script from http://dbushell.github.io/Pikaday/ works on chrome-android, the one on git repo does not.

Categories