restricting past dates on datetimepicker - javascript

I'm not having problem restricting some of my datetimepicker but this one is persistent, I'm trying to do this in angularjs, and the datetimepicker is inside the datatable, I'm setting it like this:
{
data: "next_action_date",
name: "next_action_date",
render: (data, type, row, meta)->
initValue = data
if data
initValue = "'" + data + "'"
if row.is_editable
return '<div class="input-control text" data-role="datepicker"
ng-controller="ContactDateCtrl"
ng-init="init(' + row['pk'] + ', ' + initValue + ')" data-format="mmmm d, yyyy">
<input type="text" ng-model="contactDate" ng-change="onChange()">
<button class="button"><span class="mif-calendar"></span></button>
</div>';
else
return data;
}
so this is a column in datatable where I've putting datetimepicker, so in the controller I'm doing something like this:
(function() {
var app;
app = angular.module('cms.sales');
app.controller('ContactDateCtrl', [
'$scope', '$http', function($scope, $http) {
var nextContactDateUpdateFailed, nextContactDateUpdateSuccess;
$scope.contactDate = null;
$scope.leadContactPk = null;
$scope.init = function(leadContactPk, nextContactDate) {
nextContactDate = new Date();
$scope.leadContactPk = leadContactPk;
if (nextContactDate) {
return $scope.contactDate = nextContactDate.getFullYear() + '-' + (nextContactDate.getMonth() + 1) + '-' + nextContactDate.getDate();
} else {
return $scope.contactDate = "";
}
};
$scope.onChange = function() {
var data;
data = {
contact_date: $scope.contactDate,
lead_pk: $scope.leadContactPk
};
return $http.post("/sales/update_contact_date/", data).then(nextContactDateUpdateSuccess, nextContactDateUpdateFailed);
};
nextContactDateUpdateSuccess = function() {
return ClientNotifications.showNotification("Success", "Next communication date was updated", "success");
};
return nextContactDateUpdateFailed = function() {
return ClientNotifications.showNotification("Alert", "Failed to update next communication date", "alert");
};
}
]);
}).call(this);
Now this does not restrict my datetimepicker it is just returning this time format 2017-5-23, and I'm not sure what else to do so is there anything else I could do so this restriction will work, I'm using metroui datetimepicker in my project, can anyone help me restrict this properly, thank you.

Just add format
$(function(){
$("#datepicker").datepicker({
format: 'mmmm d, yyyy',
minDate:new Date(Date.now()-(86400000 * n)) // just for min date and 'n' is the number of previous days to be allowed
});
});
or customize the ng-model of input.
Just do something like this in the if condition
var tempDate = nextContactDate.toString().split(' ');
tempDate = tempDate[1] + " " + tempDate[2] + ", " + tempDate[3];
$scope.tempDate = tempDate;
$scope.contactDate = nextContactDate;
If you change the date to string, you may loose to handle in the controller. So, store it in a temporary $scope.tempDate to display in the view and use the main variable i.e., $scope.contactDate to do the logic.
Make sure that ng-model of input should be $scope.tempDate
First choice is better

Related

Laravel post request doesn't return correct data

My form is not updating the information when I manually change the textbox fields. When i get a confirmation email I get the wrong calculation in this example. When i process the information in my controllers it gets put correct in the database but incorrect in the email to my customer. even though it uses the same information.
$('#two-inputs').dateRangePicker(
{
separator : ' tot ',
startDate: '{{$start_date->start_date}}',
endDate: '{{$end_date->end_date}}',
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ disabled.indexOf(string) == -1 ]
},
getValue: function()
{
if ($('#date-range200').val() && $('#date-range201').val() )
return $('#date-range200').val() + ' to ' + $('#date-range201').val();
else
return '';
},
setValue: function(s,s1,s2)
{
var total = 0;
var temp_s1 = s1.split("-");
var temp_s2 = s2.split("-");
$('#date-range200').val(temp_s1[2] + "-" + temp_s1[1] + "-" + temp_s1[0]);
$('#date-range201').val(temp_s2[2] + "-" + temp_s2[1] + "-" + temp_s2[0]);
var start_date = s1;
var s1 = s1.split('-');
var s1 = new Date(s1[0], s1[1] - 1, s1[2]);
var s2 = s2.split('-');
var s2 = new Date(s2[0], s2[1] - 1, s2[2]);
//alert(datediff(s1, s2));
if(obj[$('#date-range200').val()] == null){
var prijs = {{$highest_price->name}};
} else {
var prijs = obj[$('#date-range200').val()];
}
var extra_kosten = {{$blog->schoonmaak}};
total += extra_kosten;
total += datediff(s1, s2)*prijs;
$("#aantal_nachten").val(datediff(s1, s2));
$("#prijs_per_nacht").val(prijs);
$("#totaal_prijs_nachten").val(total);
$("#prijs").html(prijs);
$("#nachten").html(datediff(s1, s2));
$("#prijs_nachten").html(datediff(s1, s2)*prijs);
$("#extra_kosten").html(extra_kosten);
$("#totaal_prijs").html(total);
//alert(start_date);
//alert(obj[$('#date-range200').val()]);
$("#prijstable").slideDown( "slow");
}
});
Screenshot of the input fields
Screenshot of what i get in the email i receive
Screenshot of how it shows in my database

jQuery glDatePicker multiple data

We are using the glDatePicker plugin for our calendar event. But when 2 diffrent data on the same event occurs it only shows the last added. Is there a way to loop al items on the selected date? Could not find any input on looping this elements, console.log only shows the last input on date.
We need all data objects on given date, this can be multiple information on given date.
var all_dates = [];
$.each(agenda_json,function(index,value){
var date_split = value.calendar.split("-");
var date_event = {
year: date_split[0],
month: date_split[1],
day: date_split[2]
};
var new_event = {
date: new Date(date_event.year, (date_event.month - 1), date_event.day),
data: {
message: value.post_title,
onderwerp: value.onderwerp,
link: value.post_link
},
cssClass: value.weekday + ' event_day',
repeatMonth: false
};
all_dates.push(new_event);
});
$('#container_calendar').glDatePicker({
cssName: 'flatwhite',
showAlways: true,
specialDates: all_dates,
onClick: function(target, cell, date, data) {
target.val(date.getFullYear() + ' - ' +
date.getMonth() + ' - ' +
date.getDate());
if(data != null) {
$('#title_input').html(data.message);
$('.link_input').attr('href',data.link);
if(data.onderwerp == '' || data.onderwerp == " "){
$('#onderwerp_input').hide();
}else{
$('#onderwerp_input').show();
$('#onderwerp_input').html('<span>Onderwerp:</span><span>'+data.onderwerp+'</span>');
}
}
},
newcallback: function(){
$('body').find(".event_day").eq(0).trigger( "click" );
}
});

jquery datatable data-order alternative

Is there any way to specify data-order attribute when setting the datatable's data dynamically?
For example this is what I used to have
<td class="sorting_1" data-order="1451599200000">1 Jan 2016</td>
Now I'm setting data through columnDefs
{
render: function (date) {
var d = new Date(date);
var parsedDate = d.getUTCDate() + ' ' + monthsAbbr[d.getUTCMonth()] + ', ' + d.getUTCHours() + ":" + d.getUTCMinutes();
return parsedDate;
},
targets: 4
}
So, I'm wondering if there's any API witch I can set the td's data-order atribute.
The render() function takes a few more arguments that should help you achieve your goal. Here's an example from the manual page on renderers:
{
data: 'created',
render: function ( data, type, row ) {
var dateSplit = data.split('-');
return type === "display" || type === "search" ?
dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
data;
}
}
Applying this to your case, your render() function could be something like this:
render: function (data, type, row) {
if (type === "display" || type === "search") {
var d = new Date(data);
var parsedDate = d.getUTCDate() + ' ' + monthsAbbr[d.getUTCMonth()] + ', ' + d.getUTCHours() + ":" + d.getUTCMinutes();
return parsedDate;
}
return data;
}
See also the manual page on orthogonal data.

jQuery DatePicker background color for cells where event exists (on load)

I want to change the background-color for cells where events exist.
In this case for this day: 2016-04-07
I hope someone can help me, I don't find a solution here in SO.
Thank you
JS code:
// I WANT TO CHANGE BACKGROUND-COLOR FOR THIS DAY
var events = {"2016-04-07":[{"title":"Friday!!!!","description":"Weekend is starting!!!"}]};
// Setup our datepicker
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: findEvents
});
// Provide a function to find and display events
function findEvents (date) {
// Start by emptying our data container
$("#dateevents").empty();
// Potential date object
var dateObj = events[date];
// If no events exist for the selected date
if (!dateObj) {
return $("#dateevents").html( "<h2>" + date + ": No Events</h2>" );
}
// If we've made it this far, we have events!
$("#dateevents").html( "<h2>" + date + ": " + dateObj.length + " Events Planned</h2>" );
// Cycle over every event for this date
$.each(dateObj, function (index, event) {
// Build a list for each event
var $list = $("<ul>");
// Add all event details to list
$.each(event, function (name, desc) {
$("<li>").html(name + ": " + desc).appendTo($list);
});
// Place list in container
$list.appendTo("#dateevents");
});
}
Fiddle: http://jsfiddle.net/qSCek/6/
Try something like this, looping over the html you might want to put it in a function and call it on month change etc.
// Provide some event data in JSON format
var events = {"2016-04-07":[{"title":"Friday!!!!","description":"Weekend is starting!!!"}]};
// Setup our datepicker
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: findEvents,
});
$("td[data-handler='selectDay']").each(function(index,value){
var month = $(value).attr("data-month");
var year = $(value).attr("data-year");
var day = $(value).next().text();
var date = year+"-"+(parseInt(month) + 1)+"-"+day
$.each(events, function(i, v) {
var parts = i.split("-")
parts[1] = parts[1].replace("0","")
parts[2] = parts[2].replace("0","")
var i = parts[0]+"-"+parts[1]+"-"+parts[2]
if (i == date) {
console.log("hit")
console.log(date)
$(value).next().css("background","red")
}
});
})
// Provide a function to find and display events
function findEvents (date) {
// Start by emptying our data container
$("#dateevents").empty();
// Potential date object
var dateObj = events[date];
// If no events exist for the selected date
if (!dateObj) {
return $("#dateevents").html( "<h2>" + date + ": No Events</h2>" );
}
// If we've made it this far, we have events!
$("#dateevents").html( "<h2>" + date + ": " + dateObj.length + " Events Planned</h2>" );
// Cycle over every event for this date
$.each(dateObj, function (index, event) {
// Build a list for each event
var $list = $("<ul>");
// Add all event details to list
$.each(event, function (name, desc) {
$("<li>").html(name + ": " + desc).appendTo($list);
});
// Place list in container
$list.appendTo("#dateevents");
});
}
fiddle http://jsfiddle.net/qSCek/7/
Here is what I accomplished to do. The problem I think is that the onChangeMonthYear callback is called before the view is rendered. So I put a timeout to solve the problem.
// Setup our datepicker
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: findEvents,
onChangeMonthYear: function(year, month) {
setTimeout(changeBackground, 1, year, month)
}
});
var d = new Date();
changeBackground(d.getFullYear(), d.getMonth() + 1);
function changeBackground(year, month) {
for (var date in events) {
var d = new Date(date);
// if same day and year
if (d.getFullYear() === year && d.getMonth() + 1 === month) {
var day = d.getDate();
// retrieve all elements containing day
var elements = $('a:contains(' + day + ')');
elements.each(function(index) {
if ($(this).text() == day) {
$(this).css("background", "red");
}
});
};
}
}
And here is the fiddle

Complicated jquery validation

I have a form that I want validated (using jquery validation plugin). Problem is that I need to do some pre-processing of form values before submitting for validation.
For example, one validation case is that the start time the user defines in the form cannot be before right now. I have 2 components that I need to get the values from in order to get the start time.
Here's how I currently capture that:
var mtgStart = new Date( startDate.getFullYear() + '-' + ( startDate.getMonth() + 1 ) + '-' + startDate.getDate() + ' ' + sTime );
I have read that I can pass these params (startTime) into the validation like this:
var defaults = jQuery.extend( validationPluginDefaults, {
ignore:'',
rules: {
meetingName:{
mtgNameRequired:true
},
e2: {
startTimeInPast:false
startTime:mtgStart
}
}
});
jQuery( "form[ id='mtg_form' ]" ).validate( defaults );
Question is, where do I create the "mtgStart" variable here?
And my validation method would look like this:
jQuery.validator.addMethod("lowerInt", function(value, element, params) {
var now = new Date();
var mtgStart = params[0]:
return now < mtgStart;
}
UPDATE:
I trigger the validation on click of the submit button now; no problem. Problem now is how do I pass arguments to the jquery validation plugin? I've tried using javascript arrays (as I've read), but I'm not able to access it. Here's my code:
jQuery.validator.addMethod( "createMtgInPast", function( val, el, params ){
var now = new Date();
var mtgStart = params[0];
var nowTime = now.getTime();
var setTime = mtgStart.getTime();
return nowTime < setTime;
}, "Cannot create meeting in the past." );
And here's my click handler for submit button:
$( '#submit_btn' ).click( function( data )
{
// Concatenate the start/end dates and their times.
var newStart = new Date( startDate.getFullYear() + '-' + ( startDate.getMonth() + 1 ) + '-' + startDate.getDate() + ' ' + sTime );
var newEnd = new Date( endDate.getFullYear() + '-' + ( endDate.getMonth() + 1 ) + '-' + endDate.getDate() + ' ' + eTime );
var defaults = jQuery.extend( validationPluginDefaults, {
rules: {
meetingName:{
mtgNameRequired:true
},
e2: {
createMtgInPast: true,
data:['TEST']
}
}
});
$( "#mtg_form" ).validate( defaults );
Got it, here's my updated code:
var defaults = jQuery.extend( validationPluginDefaults, {
rules: {
meetingName:{
mtgNameRequired:true
},
e2: {
createMtgInPast: [newStart]
}
}
});
I was creating a new method and passing the args there; wrong. Pass the args directly into the validation method.

Categories

Resources