Get selected dates on Bootstrap Datepicker as string? - bootstrap-datepicker

I am using Bootstrap Datepicker having multidate: true event. And I am getting the selected date one by one, using:
.on('changeDate', function(e){
console.log(e.format('mm-dd-yyyy'));
})
Is there any ways to get all the selected dates altogether as string?
Note: The string should contain the dates which I have selected, and should not contain which I have unselected.
Here is my code so far:
$('.check-in').datepicker({
autoclose: true,
startDate: "1d",
format: "mm-dd-yyyy",
weekStart: 1,
orientation: "bottom auto",
todayHighlight: true,
multidate: true
}).on('changeDate', function(e){
console.log(e.format('mm-dd-yyyy'));
});

If you want the value as a string you can use this
>> var value = $("#dateID input").val();
I hope this can help you. :)

So did it myself. Thank you all for help.
$('.check-in').datepicker({
autoclose: true,
startDate: "1d",
format: "mm-dd-yyyy",
weekStart: 1,
orientation: "bottom auto",
todayHighlight: true,
multidate: true,
sideBySide: true
}).on('changeDate', function(e){
var dates_arr = [];
for(i=0; i<e.dates.length; i++){
dates_arr.push((String(e.dates[i].getMonth() + 1).padStart(2, '0')) + '-' + String(e.dates[i].getDate()).padStart(2, '0') + '-' + e.dates[i].getFullYear());
}
console.log(dates_arr.join());
});

Related

FlatPickr: DateTime – Increase second datetime minDate (or minTime) by hours or minutes rather than full days

With great shame, I've now spent several hours across multiple days only to continue failing to figure this one out:
How can I create a flatpickr onChange event where the minDate (or minTime?) of the second datetime input is +x hours or minutes relative to the first datetime input selection? I can't figure out how to set a relative increase less than one full day.
These config options are successfully forcing the second input's minDate to be that of the first input's datetime output down to the minute, but will accept the very same time:
// Start Date and Time: input_144_5
const startDate = $('#input_144_5').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
defaultDate: new Date(),
onChange: function(selectedDates, dateStr, instance) {
endDate.set('minDate', new Date(dateStr))
}
});
// End Date and Time: input_144_6
const endDate = $('#input_144_6').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
});
While this one is successfully setting the second input's minimum to +1 full day:
// Start Date and Time: input_144_5
var startDate = $('#input_144_5').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
defaultDate: new Date(),
onChange: function(selectedDates, dateStr, instance) {
endDate.set('minDate', new Date(dateStr).fp_incr(1))
}
});
// End Date and Time: input_144_6
var endDate = $('#input_144_6').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
});
Is there any way to set—or restrict—fp_incr() in a way that only increases the minute value by +1, or maybe targets the minutes portion of the dateStr exclusively?
FlatPickr documentation here if helpful.

Android Highchart bar chart add a text below a bar

I am displaying a bar chart in my android app with data labels. The highchart excepts only numeric value, although I have tried to use string as values the chart doesn't render. Below is my code
public void golyChartView(Number prev,Number curr)
{
HIOptions options = new HIOptions();
HIChart chart = new HIChart();
chart.setType("bar");
options.setChart(chart);
HITitle title = new HITitle();
title.setText("GOLY");
options.setTitle(title);
HISubtitle subtitle = new HISubtitle();
subtitle.setText("Growth Over Last Year");
options.setSubtitle(subtitle);
HIXAxis xaxis = new HIXAxis();
String[] categories = new String[] { "2020", "2021"};
xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});
HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("Sale Amount");
yaxis.getTitle().setAlign("high");
yaxis.setLabels(new HILabels());
yaxis.getLabels().setOverflow("justify");
options.setYAxis(new ArrayList<HIYAxis>(){{add(yaxis);}});
HITooltip tooltip = new HITooltip();
options.setTooltip(tooltip);
HILegend legend = new HILegend();
legend.setLayout("vertical");
legend.setAlign("right");
legend.setVerticalAlign("top");
legend.setX(-30);
legend.setY(40);
legend.setFloating(true);
legend.setBorderWidth(1);
legend.setBackgroundColor(HIColor.initWithHexValue("FFFFFF"));
legend.setShadow(true);
options.setLegend(legend);
HICredits credits = new HICredits();
credits.setEnabled(false);
options.setCredits(credits);
HIBar bar1 = new HIBar();
bar1.setName("Sale Value");
Number[] bar1Data = new Number[]{prev,curr};
bar1.setColorByPoint(true);
bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));
float numb = (((float)curr - (float)prev)/(float)prev)*100;
String percentage = String.valueOf(numb);
HIDataLabels dataLabels = new HIDataLabels();
dataLabels.setEnabled(true);
ArrayList<HIDataLabels> dataLabelsList = new ArrayList<>();
dataLabelsList.add(dataLabels);
bar1.setDataLabels(dataLabelsList);
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
HILegend hiLegend = new HILegend();
hiLegend.setEnabled(false);
options.setLegend(hiLegend);
options.setSeries(new ArrayList<>(Collections.singletonList(bar1)));
HIExporting exporting = new HIExporting();
exporting.setEnabled(false);
options.setExporting(exporting);
golyChart.setOptions(options);
golyChart.update(options,true,false);
}
Output
What I want to do?
As shown in the above code I have a string of percentage, that I want to add below the second bar Like below
I am stuck to it and don't know what to do
Any help would be highly appreciated.
You could use text Renderer to add text next to the bar.
I don't know android-highcharts but in javascript here an example
let customLabel,
labelInit = false;
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
render: function () {
const chart = this,
point = chart.series[0].data[1];
// prevent multiple label creation if used in render event but useless in "load" event
if (labelInit) customLabel.destroy();
customLabel = chart.renderer.text('+25 %', point.shapeArgs.height, point.tooltipPos[1] + chart.series[0].itemWidth + 10)
.add()
.attr({
zIndex: 3
});
labelInit = true;
}
}
},
title:{
text: "GOLY"
},
plotOptions: {
bar: {
grouping: false
}
},
xAxis: {
type: "category",
categories: ["2020", "2021"]
},
series: [{
data: [200, 400],
colorByPoint: true
}]
});

How to allow any date range with moment.js daterangepicker?

I am using moment.js daterangepicker to accept from and to date from user interface.However,whenever I wish to set the date range more than a month or year the calendar dates auto adjust them to one month date range.
I have gone through the documentation and tried attribute maxSpan,autoUpdate,etc.
Ranges for Today,last month,etc are working fine.
I need custom range to accept any date range.
<script src="resources/js/moment/moment.min.js"></script>
<script>
var startDate;
var endDate;
var startDateCount = <%= l_startdatecount%>;
var endDateCount = <%= l_enddatecount%>;
startDateCount = -startDateCount;
endDateCount = -endDateCount;
$(document).ready(function() {
$('#reportrange_right').daterangepicker( {
startDate: moment().subtract(startDateCount, 'days'),
endDate: moment().subtract(endDateCount, 'days'),
minDate: '01/01/2012',
maxDate: '01/01/2050',
dateLimit: {
days: 365
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment()],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'right',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Clear',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
$('#reportrange_right span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
startDate = start.startOf('day');
endDate = end.startOf('day');
}
);
$('#reportrange_right span').html(moment().subtract(startDateCount, 'days').format('D MMMM YYYY') + ' - ' + moment().subtract(endDateCount, 'days').format('D MMMM YYYY'));
startDate = moment().startOf('day').subtract(startDateCount, 'days');
endDate = moment().startOf('day').subtract(endDateCount, 'days')
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Expected output:
Left calendar selects 2018-07-29 then right calendar can select any date from 2018-07-29 to future.
Actual output:
Left calendar selects 2018-07-29,right calendar only allows dates in August 2019 and vice-versa.
Got a solution from the forum of moment.js!
I got to add linkedCalendars:false and remove
dateLimit: {
days: 365
}

MVC Datetime picker validation

I have an MVC application.My page contain two date time picker.start date and end date.My requirement is,
when anyone select the start date ,the end date should be calculated as start date +10 days.
also one condition, end date should not be less than start date.
How can i possible?
$(document).ready(function ()
{
$("#txtstartdate").datepicker
({
dateFormat: 'mm/dd/yy',
showAnim: "slideDown",
showOptions: {
origin: ["top", "left"]
}
});
$("#txtEnddate").datepicker
({
dateFormat: 'mm/dd/yy',
showAnim: "slideDown",
showOptions: {
origin: ["top", "left"]
}
});
});
I am using jquery datetime picker.
I just used javascript code but when I select the datetime picker it always showing prevoius selected date.how can I get selected date on selecting the datetime picker?
Try this:
$(function ()
{
$('#txtStartDate, #txtEndDate').datepicker(
{
showOn: "both",
beforeShow: customRange,
dateFormat: 'mm/dd/yy',
showAnim: "slideDown",
showOptions: {
origin: ["top", "left"]
},
firstDay: 1,
changeFirstDay: false
});
});
function customRange(input)
{
var min = new Date(2008, 11 - 1, 1); //the absolute minimum date
var dateMin = min;
var dateMax = null;
var dayRange = 10; //range of days
if (input.id == "txtStartDate")
{
if ($("#txtEndDate").datepicker("getDate") != null)
{
dateMax = $("#txtEndDate").datepicker("getDate");
dateMin = $("#txtEndDate").datepicker("getDate");
dateMin.setDate(dateMin.getDate() - dayRange);
if (dateMin < min)
{
dateMin = min;
}
}
else
{
dateMax = new Date(); //the absolute maximum date
}
}
else if (input.id == "txtEndDate")
{
dateMax = new Date(); //the absolute maximum date
if ($("#txtStartDate").datepicker("getDate") != null)
{
dateMin = $("#txtStartDate").datepicker("getDate");
var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + dayRange);
if(rangeMax < dateMax)
{
dateMax = rangeMax;
}
}
}
return {
minDate: dateMin,
maxDate: dateMax,
};
}​
DEMO: http://jsfiddle.net/XdFpg/

JQuery Validate: How do I add validation which checks the sum of multiple fields?

I'm trying to use jQuery validation for a dynamic form I'm setting up.
In some cases this form contains a set of input boxes which are suppose to total 100.
An example might be:
Please indicate what percentage of students are in each grade?
Grade 9: TextBox1
Grade 10: TextBox2
Grade 11: TextBox3
Grade 12: TextBox4
I want to verify that TextBox1 + TextBox2 + TextBox3 + TextBox4 = 100%.
How do I go about this?
Thanks!
<script>
$(document).ready(function(){
$("#some-form").validate({
rules: {
TextBox1: {
required: true,
number: true,
min: 0,
max: 100,
},
TextBox2 : {
required: true,
number: true,
min: 0,
max: 100,
}
TextBox3 : {
required: true,
number: true,
min: 0,
max: 100,
}
TextBox4 : {
required: true,
number: true,
min: 0,
max: 100,
}
},
submitHandler: function(form){
var total = parseInt($("#TextBox1").val()) + parseInt($("#TextBox2").val()) + parseInt($("#TextBox3").val()) + parseInt($("#TextBox4").val());
if (total != 100) {
$(".error").html("Your total must sum to 100.")
return false;
} else form.submit();
}
});
});
</script>
Stolen and edited from here.

Resources