Predefined daterangepicker with date format - daterangepicker

I modified the example of Predefined Ranges from www.daterangepicker.com
I tried putting the date derived from mySQL to replace the default from the example. But it's not working. It keep saying 'Invalid date' even from the other post on the net saying I can use the date format from PHP.
script
$(function(){
if($('#rentalDate').length){
var start=$('#rent_from').val();
var end=$('#rent_to').val();
}else{
var start = moment();
var end = moment().add(+3,'M');
}
console.log(start+'/'+end);
function cb(start, end) {
$('#rental-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$('#rentalDate').val(start.format('Y-mm-d') + ',' + end.format('Y-mm-d'));
}
$('#rental-range').daterangepicker({
"autoApply": true,
startDate: start,
endDate: end,
}, cb);
cb(start, end);
});
Here is the fiddle : http://jsfiddle.net/cuxm50k2/1/

If you're going to use a different date format than the default MM/DD/YYYY, you need to specify that in your options.
Updated fiddle: http://jsfiddle.net/cuxm50k2/2/
Updated options:
$('#rental-range').daterangepicker({
autoApply: true,
startDate: start,
endDate: end,
locale: {
format: 'YYYY/MM/DD'
}
}, cb);

Related

How to select value programmatically with MagicSearch jQuery Plugin?

I am using this jQuery plugin MagicSearch
How can I programatically select a value (by ID for example)?
This is what I have. After a careful analysis of their callback functions, I have devised a method to extract the ID and Name from my search list.
Please find the code to my attempt:
<script>
var idList="";
var nameList = "";
$(function () {
var dataSource = "[{\"id\":1,\"name\":\"test\"},
{\"id\":2,\"name\":\"example\"},{\"id\":3,\"name\":\"image\"},
{\"id\":4,\"name\":\"election\"},{\"id\":5,\"name\":\"IPL\"},
{\"id\":6,\"name\":\"Fashion\"},{\"id\":7,\"name\":\"Movies\"},
{\"id\":8,\"name\":\"Pollution\"},{\"id\":9,\"name\":\"Modi\"},
{\"id\":10,\"name\":\"Rahul\"},{\"id\":11,\"name\":\"Cricket\"},
{\"id\":12,\"name\":\"Market\"},{\"id\":13,\"name\":\"TestKeyword\"},
{\"id\":14,\"name\":\"testkeyword1\"},{\"id\":15,\"name\":\"testkeyword2\"},
{\"id\":16,\"name\":\"testkeyword3\"}]";
$('#basic').magicsearch({
dataSource: dataSource,
fields: ['name'],
id: 'id',
format: '%name%',
hidden: true,
multiple: true,
focusShow: true,
isClear: true,
multiField: 'name',
multiStyle: {
space: 5,
width: 200
},
success: function ($input, data) {
idList = idList + data.id + ',';
nameList = nameList + data.name + ',';
// alert(data.id);
return true;
},
afterDelete: function ($input, data) {
idList = idList.replace(data.id + ',', "");
nameList = nameList.replace(data.name + ',',"");
//alert(data.id);
return true;
}
});
});
Link to the fiddle: https://jsfiddle.net/yn0cmgjt/5/
Excuse me for the bad interface. I had a difficult time getting the CDN link to this plugin and somehow it is not rendering the correct way. But play around with this and I hope it will suffice to your needs.
The two lists (idList and nameList) that I have created are the id and name for each element concatenated in a single comma separated string. Once you have this string, you can extract out the required information.

Table sort by using textExtraction using data-sort-value attribute in td

Added the following td. The date value is coming as a format 01 Aug 1990. I want to sort that column. But it is not working. How can I properly set the data-sort-value so that it sort in correct way
<td data-sort-value="${info.offDate}" class="${someclass}">${info.offDate}</td>
I have the following javascript for sorting -
$(function() {
$("#infoListTable").tablesorter({
textExtraction: function(node) {
var attr = $(node).attr('data-sort-value');
if (typeof attr !== 'undefined' && attr !== false) {
return attr;
}
return $(node).text();
},headers: {
dateFormat: 'dd-mm-yyyy',
6: { sorter:'otherDate' }
}
});
});
The built-in parser for 'dd-mm-yyyy' doesn't understand month names. It is expecting all numerical values.
You can add your own parser. Since modern browsers are able to parse new Date("dd MMM yyyy"), the parser is very simple (demo):
$.tablesorter.addParser({
id: 'date-dd-MM-yyyy',
is: function() {
return false;
},
format: function(str) {
var date = str ? new Date(str) : str;
return date instanceof Date && isFinite(date) ? date.getTime() : str;
},
type: 'numeric'
});
$('table').tablesorter({
headers: {
6: { sorter: 'date-dd-MM-yyyy' }
}
});
Additionally, the textExtraction method can be simplified to:
textExtraction: function(node) {
return $(node).attr('data-sort-value') || $(node).text();
}
since the jQuery .attr() function will return an empty string if undefined instead of false.

How to use queries in a loop with sails.js async structure?

I'm new to MVC programming and also to Sails.Js, and I'm sure I'm not using it the right way.
What I want to do is to ask my database some informations, create an array with that and then return the data to the view.
Here is what I do:
model.exports = {
'parse': function(req, res) {
var week = [0,0,0,0,0,0,0];
Elements.find({ date : {'>=' : start_date, '<' : end_date }}).exec(function countCB(error, found) {
while (found.length){
week[found.date]++;
total++;
found.pop();
};
res.view('static/emissions', { data : week });
});
};
};
Here is how Id' like to do, but the async structure of Node make it fail:
model.exports = {
'parse': function(req, res) {
var week = [0,0,0,0,0,0,0];
for (var day = 0; day < 7; day++){
Elements.count({ date : {'>=' : start_date + day, '<' : end_date + day }}).exec(function countCB(error, count) {
week[day] = count;
});
};
res.view('static/emissions', { data : week });
};
};
So am I doing it rigth with the first method ? If no, could you please give me an example that show how to do it correctly ?
Thanks :)
Finally I managed to do what I wanted using the mongodb aggregate native method.

FullCalendar issue while pulling data for second time on button click

I'm giving a date as an input and with the help of ajax call getting the data oriented for that particular date, while doing so I'm getting the data successfully for the first time. If i do the same the second time, I'm getting the first time data again for any date selected.
I thought the Issue to happens in this line,
$('#calendar').fullCalendar('gotoDate', NewDate);
Where i'm trying to move the calendar to the date selected, After this line im seeing the date selected getting changed to the date which is selected first time. If i refresh the page and try again it works as it believe as first request. But without this line the request for the second time is not getting completed totally.
Example: If i select the date as March-16 2015 and click on View button, I will see the list of events with start and end date in calendar for March 16, and if i try the same second time as July 13 2015, I will see the results of March 16 coming up again rather than July13.
I'm sharing my code below,
$scope.view = function(){
document.getElementById("calendar").style.display="block";
var portfolio = $scope.selectedPortfolioList.portfolio;
var period = $scope.selectedPeriod.period;
var week = $scope.selectedWeek.week;
var sDate = $("#bDate").val();
var json = { "portfolio" : portfolio, "week" : week, "period": period, "sDate":sDate};
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback) {
$.ajax({
url: 'service/businessEvents',
dataType: 'json',
type: "POST",
data:JSON.stringify(json),
contentType: 'application/json',
mimeType: 'application/json',
success: function(response) {
var events = [];
$.each(response, function (idx,infraslist) {
var Tile=infraslist.title;
var star =infraslist.startTime;
var end = infraslist.end;
var endt = $.fullCalendar.moment(star);
endt = endt.add(end,'hours');
//Here pushing the content on calendar
events.push({
title: Tile,
start: star,
end: endt
});
});
callback(events);
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
alert('Internal error: ' + jqXHR.responseText);
} else {
alert('Unexpected error.'+ errorThrown);
}
}
});
},
eventClick: function(calEvent, jsEvent, view) {
if (view.name === "month") {
view.calendar.zoomTo(calEvent.start, "agendaWeek");
};
if (view.name === "agendaWeek") {
view.calendar.zoomTo(calEvent.start, "agendaDay");
};
}
});
var NewDate = moment(sDate).format('YYYY/MM/DD');
//Here the date changes after the below line. If i dont mention the below line the request stops here.
$('#calendar').fullCalendar('gotoDate', NewDate);
//
};

Passing the date value in fullcalendar

I am using fullcalendar to upload dates times to my database and i have the following script
$dialogContent.dialog({
modal: true,
title: "New Listing",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
},
buttons: {
save : function () {
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.ajax({
type: "POST",
url: "addnew.php",
data: (
{
'st':new Date(startField.val()),
'et':new Date(endField.val()),
'title':titleField.val(),
'body':bodyField.val()
}
),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
However my date values are not being sent at all. Its wrong but I don't know how or why.
the Date constructor does not parse any old date string. use fullCalendar's parsing function instead (provided you are using ISO8061 format):
http://arshaw.com/fullcalendar/docs/utilities/parseDate/
What value of date do you get in server side?
May be, you should to send simple data type like UNIX timestamp or using .serialize() for your form.
I have been playing around with ParseDate but I'm just not getting results, seems I have the concept all wrong;
dayClick : function(date, allDay, jsEvent, view) {
var $dialogContent = $("#event_edit_container");
y = date.getFullYear();
m = date.getMonth();
d = date.getDate();
h1 = date.getHours();
m1 = date.getMinutes();
h2 = h1 + 1;
m2 = m1;
calEvent = { title: 'New Calendar Event', editable:true, distributor: '', etype: '', location: '', website: '', start: new Date(y, m, d, h1, m1), end: new Date(y, m, d, h2, m2), allDay: false };
$calendar.fullCalendar("renderEvent",calEvent, true);
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
var distributorField = $dialogContent.find("input[name='distributor']").val(calEvent.distributor);
var etypeField = $dialogContent.find("select[name='etype']").val(calEvent.etype);
var locationField = $dialogContent.find("input[name='location']").val(calEvent.location);
var websiteField = $dialogContent.find("input[name='website']").val(calEvent.website);
var bodyField = $dialogContent.find("textarea[name='body']");
//var start_date = eval($.fullCalendar.parseDate(this_one['start']).getTime()) / 1000;
$dialogContent.dialog({
modal: true,
title: "New Listing",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
},
buttons: {
save : function () {
calEvent.id = id;
id++;
calEvent.start = $.fullCalendar.parseDate(new Date(startField.val()));
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.distributor = distributorField.val();
calEvent.etype = etypeField.val();
calEvent.location = locationField.val();
calEvent.website = websiteField.val();
calEvent.body = bodyField.val();
//$.fullCalendar.parseDate(calEvent.start);
//calEvent.st = start_date.val();
//$.fullCalendar.parseDate(startField.val());
$.ajax({
type: "POST",
url: "addnew.php",
data: (
{
'st':calEvent.start,
'et':new Date(endField.val()),
'title':titleField.val(),
'distributor':distributorField.val(),
'etype':etypeField.val(),
'location':locationField.val(),
'website':websiteField.val(),
'body':bodyField.val()
}
),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
I'm at a brick wall with this I've tried tons of variations of hte code but its all just guess work. If there is an example of the date filed being passed or even printed out I'd really appreciate it just to see how this should work. Trial and error is not working for me in this case.
Thanks
It's late and i haven't used Javascript in a while, but surely it's input.value not input.val()

Resources