We Keep Coding

How to create dynamic array for each object datetimepicker

Plugin: eonasdan/Bootstrap 3 Datepicker
Explaination:
I want to write an application that user can select 5 different hours for each day. so i created an array and add each day (without duplicate), for example user select 31/12/2017 and 30/12/2017 , now i want to give they this ability to select only 5 different hour for each day that selected.
Tried Code:
var limit = 5;
var i = 0;
var dateArray = new Object();
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
if ($.inArray(unqdate, dateArray) == -1) {
dateArray[unqdate] = unqtime
}
}
console.log(dateArray);
});
JSFiddle
(For testing, select a date, then click on save button, then check console)
Goal:
var dateArray = {
"31-12-2017": [{
"time": "14:00"
}, {
"time": "17:15"
}],
"30-12-2017": [{
"time": "13:00"
}, {
"time": "12:15"
}]
}
Problem:
I couldn't figured out how can i add another time to each day. it's my first time i work with array and object like this.
I want to prevent duplicate entry and only five different hour per day.
Somehow I'm in learning.

There is some problem with your JS Code:
var limit = 5;
var i = 0;
var dateArray = new Object();
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
if ($.inArray(unqdate, dateArray) == -1) {
if(dateArray[unqdate] && dateArray[unqdate].length < limit) {
if(!dateArray[unqdate].find((ele) =>ele.time === unqtime)){
dateArray[unqdate].push({"time": unqtime})
}
} else {
dateArray[unqdate] = [{"time": unqtime}]
}
}
}
console.log(dateArray);
});
Note included logic for time split. You can use split by : and take the first 2 element of array.

I have created JSON response for your requirement.
Result :: JSON.stringify(parentObject)
Code is as below.
$(document).ready(function() {
$('#datetimepicker1').datetimepicker({
stepping: 30,
sideBySide: true,
showTodayButton: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
// my code
var limit = 5;
var i = 0;
var parentObject = new Object();
var parentArray = [];
var dateAndTimeObject;
function isDateSelectedExists(date) {
for (var i = 0; i < parentArray.length; i++) {
var obj = parentArray[i];
if (obj["date"] === date) {
return i;
}
}
return -1;
}
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
var tempIndex = isDateSelectedExists(unqdate);
console.log("tempIndex :: " + tempIndex);
if (tempIndex == -1) {
console.log("date doesn't exists");
dateAndTimeObject = new Object();
dateAndTimeObject["date"] = unqdate;
var timeArray = [];
timeArray.push(unqtime);
dateAndTimeObject["time"] = timeArray;
parentArray.push(dateAndTimeObject);
parentObject["res"] = parentArray;
} else {
console.log("date exists");
dateAndTimeObject = parentArray[tempIndex];
var timeArray = dateAndTimeObject["time"];
if(timeArray.length<5) timeArray.push(unqtime);
dateAndTimeObject["time"] = timeArray;
}
console.log("final res :: " + JSON.stringify(parentObject));
}
});});

unable to bind click event for all columns headers. works only one time

I am looking for help why this code is not working for all headings of column. This code works for fist time for any column but does not fire click event second time. why $(ColTh).click(function () is not being attached to all th in header ?
$("table.ui-datepicker-calendar > thead").find("th[scope='col']").each(function() {
var ColTh = $(this);
$(ColTh).click(function() {
var colIndex = $(ColTh).index();
var dateList = [];
$(ColTh).closest('table').find('tr').each(function() {
var dateTd = $(this).find('td:eq(' + colIndex + ')');
var month = $(dateTd).attr('data-month'); //.trigger('click');
var year = $(dateTd).attr('data-year');
var day = $(dateTd).children(0).text();
if (typeof month != 'undefined') {
var monthINT = parseInt(month.trim());
monthINT = monthINT + 1;
var newDate = monthINT + '-' + day.trim() + '-' + year.trim();
dateList.push(newDate);
}
});
$('#itemSchedulerCal').multiDatesPicker('addDates', dateList);
dateList = [];
});
});

I'm not sure about the rest of your code, but about your binding, you can do like this:
$("table.ui-datepicker-calendar").on("click", "th[scope='col']", function() {
var ColTh = $(this);
var colIndex = ColTh.index();
var dateList = [];
ColTh.closest('table').find('tr').each(function() {
var dateTd = $(this).find('td:eq(' + colIndex + ')');
var month = dateTd.attr('data-month'); //.trigger('click');
var year = dateTd.attr('data-year');
var day = dateTd.children(0).text();
if (typeof month != 'undefined') {
var monthINT = parseInt(month.trim());
monthINT = monthINT + 1;
var newDate = monthINT + '-' + day.trim() + '-' + year.trim();
dateList.push(newDate);
}
});
$('#itemSchedulerCal').multiDatesPicker('addDates', dateList);
dateList = [];
});
You are using to ColTh as $(ColTh), but ColTh is already a jQuery object since you are setting it with $(this). The same applies to dateTd.

i did following steps to achieve above
Step 1:
jQuery(document).ready(function () {
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function (inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow) {
// trigger custom callback
afterShow.apply((inst.input ? inst.input[0] : null));
}
}
});
step 2:
$('#itemSchedulerCal').multiDatesPicker({
showWeek: true,
minDate: 0,
dateFormat: "m-d-yy",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
defaultDate: defdate,
afterShow: function (inst)
{
BindClicks();
}
});
Step 3:
function BindClicks() {
// paste all above code
}

Kendo UI Grid - Filter - Date Range

Filtering a column by date range works nice with solution that i've found in SO
How to define a Kendo grid Column filter between two dates? - proposed by MWinstead
But
"The only problem with this solution is that if you only select the End Date and apply the filter, the next time you open the filter menu, the Begin Date will get populated with the End Date you entered and the LTE operator will be selected, which will be changed by the jQuery code, resulting in a wrong filter"
Question asked by ataravati in the same thread
How we can resolve this issue ?

The soltion is to provide the Begin Date with null value, even if the user hasn't selected it.
But, we must take control of submit button...
function grid_filterMenuInit(e) {
var currentFieldName = e.field;
if(currentFieldName === "yourFieldDate") {
console.info("ignoring this field: <" + currentFieldName + ">");
return;
}
console.info("performing this field: <" + currentFieldName + ">");
var filterSubmit = e.container.find("[type=submit]:eq(0)");
$(filterSubmit).click(function() {
var searchDateAfter = e.container.find("input:eq(0)");
var searchDateAfter1 = $(searchDateAfter).val();
var searchDateBefore = e.container.find("input:eq(1)");
var searchDateBefore1 = $(searchDateBefore).val();
var gridDatasource = $("#yourGridId").data("kendoGrid").dataSource;
var jsDateBefore = null;
var jsDateAfter = null;
// we must convert kendoDateTime to JavaScript DateTime object
// in my case the date time format is : yyyy/MM/dd HH:mm:ss
if (typeof searchDateBefore1 !== 'undefined') {
jsDateBefore = newJsDate(searchDateBefore1);
}
if (typeof searchDateAfter1 !== 'undefined') {
jsDateAfter = newJsDate(searchDateAfter1);
}
var previousFilter = gridDatasource.filter();
var previousFilters = new Array();
var newFilters = new Array();
// storing the previous filters ...
if (typeof previousFilter === 'object' && previousFilter.hasOwnProperty("filters")) {
previousFilters = previousFilter.filters;
for (var i=0 ; i<previousFilters.length ; i++) {
if (previousFilters[i].field !== currentFieldName) {
if (newFilters.length == 0) {
newFilters = [previousFilters[i]];
}
else {
newFilters.push(previousFilters[i]);
}
}
}
}
// this is the soltion : we must provide the first filter, even if the user has not provide the begin date
// and the value will be : null
if (newFilters.length == 0) {
newFilters = [{field: currentFieldName, operator: "gte", value: jsDateAfter }];
}
else {
newFilters.push ({field: currentFieldName, operator: "gte", value: jsDateAfter });
}
if (jsDateBefore !== null) {
newFilters.push ({field: currentFieldName, operator: "lte", value: jsDateBefore });
}
gridDatasource.filter (newFilters);
$(".k-animation-container").hide();
// to stop the propagation of filter submit button
return false;
});
}
function newJsDate(dateTime) {
if (dateTime === null ||
typeof dateTime === 'undefined' ||
dateTime === "") {
return null;
}
var dateTime1 = dateTime.split(" ");
var date = dateTime1[0];
var time = dateTime1[1];
var date1 = date.split("/");
var time1 = time.split(":");
var year = parseInt(date1[0], 10);
var month = parseInt(date1[1], 10);
month = month - 1;
var day = parseInt(date1[2], 10);
var hour = parseInt(time1[0], 10);
var minute = parseInt(time1[1], 10);
var second = parseInt(time1[2], 10);
var jsDate = new Date(year, month, day,
hour, minute, second);
return jsDate;
}

how to autoselect current date in calendar control?

how to autoselect current date in javascript?.
I am using Calendar .js for displaying calendar,but dont know how to autoselect current date.Please guide me
Edit:
Calender.js
var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link;
link.style.fontWeight = 'bold';
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date;
cal.sel.focus();
// just update the date in the input field.
// if ((cal.sel.id).substr(0,3) == "row" || cal.sel.id == "row3")
cal.callCloseHandler();
}
function closeHandler(cal) {
cal.hide(); // hide the calendar
}
function showCalendar(id, format) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide();
// so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(false, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
calendar.showAtElement(el); // show the calendar below it
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() {
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(false, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
cal.create(parent);
cal.show();
}
function compareDate(date1, date2)
{
var strErrMsg = "";
tokens = date1.split("-");
dd = tokens[0];
mm = tokens[1];
mm=mm-1;
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
tokens1 = date2.split("-");
dd = tokens1[0];
mm = tokens1[1];
mm=mm-1;
yyyy = tokens1[2];
dt2 = new Date(yyyy,mm,dd);
if(dt1.valueOf() <= dt2.valueOf())
alert(dt1);
alert(dt2);
var difInDays = (parseInt) ((dt2.getTime() - dt1.getTime())/(1000*60*60*24));
alert(difInDays);
if(dt1.valueOf() <= dt2.valueOf())
{
return strErrMsg;
}
else
{
strErrMsg = "Cannot be Greater than ";
return strErrMsg;
}
return strErrMsg;
}
function nextDateAfterThreeDays(date1)
{
tokens = date1.split("-");
dd = tokens[0];
mm = parseInt(tokens[1]-1);
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
var time=dt1.getTime();
time=time;
dt1.setTime(time);
var newDD = dt1.getDate()+3;
var newMM = dt1.getMonth()+1;
var newYY = dt1.getFullYear();
if(newDD<10)
newDD="0"+newDD;
if(newMM<10)
newMM="0"+newMM;
date1=newDD+"-"+newMM+"-"+dt1.getFullYear();
return date1;
}
function compareBackDate(date1, date2)
{
var strErrMsg = "";
tokens = date1.split("-");
dd = tokens[0];
mm = parseInt(tokens[1])-1;
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
tokens = date2.split("-");
dd = tokens[0];
mm = parseInt(tokens[1])-1;
yyyy = tokens[2];
dt2 = new Date(yyyy,mm,dd);
var difInDays = (parseInt) ((dt1.getTime() - dt2.getTime())/(1000*60*60*24));
alert(""+difInDays);
if(difInDays > 15 )
{
strErrMsg = " Should not be earlier six month than ";
}
return strErrMsg;
}
function convertDate(date1)
{
var tokens1;
var ddd;
var mmm="";
var mmm1;
var yyyyy;
var strErrMsg="";
tokens1 = date1.split("-");
ddd = tokens1[0];
mmm = tokens1[1];
yyyyy = tokens1[2];
if(mmm=="Jan")
{
mmm1=01;
}
if(mmm=="Feb")
{
mmm1=02;
}
if(mmm=="Mar")
{
mmm1=03;
}
if(mmm=="Apr")
{
mmm1=04;
}
if(mmm=="May")
{
mmm1=05;
}
if(mmm=="Jun")
{
mmm1=06;
}
if(mmm=="Jul")
{
mmm1=07;
}
if(mmm=="Aug")
{
mmm1=08;
}
if(mmm=="Sep")
{
mmm1=09;
}
if(mmm=="Oct")
{
mmm1=10;
}
if(mmm=="Nov")
{
mmm1=11;
}
if(mmm=="Dec")
{
mmm1=12;
}
strErrMsg=ddd+"-"+mmm1+"-"+yyyyy;
return strErrMsg;
}
function isComboSelected(objComboName)
{
var strErrMsg = "";
var objForm = document.getElementsByTagName("form")[0];
var objCombo = document.getElementsByName(objComboName)[0];
if(objCombo.options[0].selected == true)
{
strErrMsg = "Please Select Value.";
return strErrMsg;
}
return strErrMsg;
}
Edit2:
My code
<script type="text/javascript">
function submitFun()
{
var frm=document.forms[0];
var fromDate=frm.lsReqRecDate.value;
//var toDate=frm.toDate.value;
var date1=convertDate(fromDate);
//var date2=convertDate(toDate);
var mm;var dd;var yyyy;
var mm1;var dd1;var yyyy1;
var d1=date1;
var txtAppFrmDate=date1;
if(d1.indexOf("-")!=-1)
{
dd=d1.substring(0,d1.indexOf("-"));
mm=d1.substring(d1.indexOf("-")+1,d1.lastIndexOf("-"));
yyyy=d1.substring(d1.lastIndexOf("-")+1,d1.length);
}
start_Date=new Date(yyyy,mm-1,dd);
var fDate = txtAppFrmDate.split("-");
// var tDate = txtAppToDate.split("-");
var one_day=1000*60*60*24;
var fdt = new Date((fDate[2]),(fDate[1]-1),(fDate[0]));
frm.submit();
}
</script>
<html:form action="/exceptionNBReport.do" styleId="frmDatewise">
<TABLE class="ReportFilter">
<THEAD>
<TR>
<TD colspan="2">NB Report Search</TD>
</TR>
</THEAD>
</TABLE>
<br><br>
<TABLE class="ReportFilter">
<TR>
<TD class="lbl" align="left">Last requirement received date</TD>
<TD>
<html:text property="lsReqRecDate" style="width:170;" readonly="readonly"/>
<input type="reset" value="..." onclick="return showCalendar('lsReqRecDate','dd-MM-y');" name="reset"/>
</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<html:button property="search" value="Submit" onclick="submitFun()"/>
</TD>
</TR>
</TABLE>
</html:form>

It would appear from the source code of Calendar that you need to pass the desired date into the Calendar() constructor as the second argument to the constructor. See lines 16 and 588 for details.

Date formatting options using Javascript

I have this code that updates a calendar widget and input field, while validating the date. We want the user to be able to input any type of m-d-y format (m.d.y, m-d-y, and so on). The problem is the YUI calendar widget only accepts the m/d/y format. All others it returns as NaN. I have tried a couple ways to format the date, but can't get anything that seems to work. I would like to be able to do this with out a lot of overblown code. Does anyone have any suggestions as to the best approach here? Here is my code:
//CALENDAR --------------------------------------------------------------------------------
var initCal = function(calendarContainer){
if(YAHOO.env.getVersion("calendar")){
var txtDate = Dom.get("dateOfLoss");
var myDate = new Date();
var day = myDate.getDate();
var month = myDate.getMonth() +1;
var year = myDate.getFullYear() -1;
var newDate = month + "/" + day + "/" + year;
function handleSelect(type, args, obj){
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
txtDate.value = month + "/" + day + "/" + year;
aCal.hide();
}
function updateCal(){
if (!(txtDate.value.match(/((\d{2})|(\d))\/|\-((\d{2})|(\d))\/|\-((\d{4})|(\d{2}))/))) {
alert("Enter date in mm/dd/yy or mm/dd/yyyy format.");
}
else {
if (txtDate.value != "") {
aCal.select(txtDate.value);
var selectedDates = aCal.getSelectedDates();
if (selectedDates.length > 0) {
var firstDate = selectedDates[0];
aCal.cfg.setProperty("pagedate", (firstDate.getMonth() + 1) + "/" + firstDate.getFullYear());
aCal.render();
}
else {
alert("Date of Loss must be within the past year.");
}
}
}
}
var aCal = new YAHOO.widget.Calendar(null, calendarContainer, {
mindate: newDate,
maxdate: new Date(),
title: "Select Date",
close: true
});
aCal.selectEvent.subscribe(handleSelect, aCal, true);
aCal.render();
Event.addListener("update", "click", updateCal);
Event.addListener(txtDate, "change", function(e){
updateCal();
});
// Listener to show the 1-up Calendar when the button is clicked
// Hide Calendar if we click anywhere in the document other than the calendar
Event.on(document, "click", function(e){
var el = Event.getTarget(e);
if(Dom.hasClass(el, "calendarButton"))
aCal.show();
else if (Dom.hasClass(el, "link-close") || !Dom.isAncestor(calendarContainer, el))
aCal.hide();
});
}
else {
var successHandler = function() {
initCal(calendarContainer);
};
OURPLACE.loadComponent("calendar", successHandler);
}
};

Did you tried http://www.datejs.com/?
Maybe you can define some patterns and test agaist the input.
How can I convert string to datetime with format specification in JavaScript?

var updateCal = function(){
if (!(txtDate.value.match(/^(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.]\d\d+$/))) {
return;
}
//else if ((txtDate.value.match(/^(0?[1-9]|1[012])[- .](0?[1-9]|[12][0-9]|3[01])[- .]\d\d+$/))) {
//}
else {
var changedDate = txtDate.value;
changedDate = changedDate.replace(/[. -]/g, "/");
txtDate.value = changedDate;
badClaimDate = claimDateWithinPastYear();
aCal.select(changedDate);
I used a RegEx to determine which, if any, delimiters needed to be replaced and simply used .replace.