Bootstrap datetimepicker changing formats dynamically - javascript

I have a function that I'm using to update the format of a Bootstrap datetimepicker when some event happens. The first subsequent time that I click on the datetimepicker, it utilizes the new format to render the picker. For example, if I set the format to YYYY it only shows years. However, if I close the datepicker and open it again, then it renders the full calendar. Am I doing something wrong, or is this a bug with the datetimepicker?
function updateInterval(interval) {
$('#interval').val(interval);
if (interval === 'LAST24') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
} else if (interval === 'HOURLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
} else if (interval === 'DAILY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
} else if (interval === 'WEEKLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
} else if (interval === 'MONTHLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
}
}
Based on the documentation it seems pretty straightforward, so not sure what I'd be doing wrong.

Your code is fine, it's a known bug of the lastest version of Eonasdan's bootstrap-datetimepicker. You can try to set currentViewMode = 0; in the component code as suggested in the github link or use an older version, like 4.17.37, as shown in the following working snippet:
var jq182 = $;
function updateInterval(interval) {
$('#interval').val(interval);
if (interval === 'LAST24') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
} else if (interval === 'HOURLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
} else if (interval === 'DAILY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
} else if (interval === 'WEEKLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
} else if (interval === 'MONTHLY') {
jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
}
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="input-group date" id="endDatePicker">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button type="button" class="btn btn-default" onclick="updateInterval('LAST24')">LAST24</button>
<button type="button" class="btn btn-default" onclick="updateInterval('HOURLY')">HOURLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('DAILY')">DAILY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('WEEKLY')">WEEKLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('MONTHLY')">MONTHLY</button>
<input type="text" id="interval" class="form-control" readonly>
Here and here people that had the same issue.

Related

Removing element by value from array

I am working on the following problem:
If user selects any of Toyota, Mazda, and Nissan Then remove All from makeArr array if exist
and
If user selects All Then remove any of Toyota, Mazda, and Nissan from makeArr array if they exist
I tried to use this code
makeArr.splice($.inArray("All", makeArr), 1);
in the else part but it is not working!
var makeArr = [];
$(".btn-primary").on("click", function() {
let make = $(this).data('make');
if (make === "All") {
var idx = $.inArray(make, makeArr);
if (idx == -1) {
makeArr.push(make);
} else {
makeArr.splice(idx, 1);
}
} else {
// makeArr.splice($.inArray("All", makeArr), 1);
var idx = $.inArray(make, makeArr);
if (idx == -1) {
makeArr.push(make);
} else {
makeArr.splice(idx, 1);
}
}
console.log(makeArr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-2">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary" data-make="Toyota">Toyota</button>
<button type="button" class="btn btn-primary" data-make="Mazda">Mazda</button>
<button type="button" class="btn btn-primary" data-make="Nissan">Nissan</button>
<button type="button" class="btn btn-primary" data-make="All">All</button>
</div>
</div>
Your issue is that when you select All, you're not checking if there are any other models in the array already. It's simplest in that case just to check for All in the array, and if it is there, empty the array, otherwise set it to ['All']. Likewise, when a specific model is selected, you need to remove 'All' from the array if it is in there before adding/removing the selected model.
var makeArr = [];
$(".btn-primary").on("click", function() {
let make = $(this).data('make');
if (make === "All") {
idx = makeArr.indexOf('All');
makeArr = idx == -1 ? ['All'] : [];
} else {
idx = makeArr.indexOf('All');
if (idx != -1) {
makeArr.splice(idx, 1)
}
idx = makeArr.indexOf(make);
if (idx != -1) {
makeArr.splice(idx, 1)
} else {
makeArr.push(make);
}
}
console.log(makeArr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-2">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary" data-make="Toyota">Toyota</button>
<button type="button" class="btn btn-primary" data-make="Mazda">Mazda</button>
<button type="button" class="btn btn-primary" data-make="Nissan">Nissan</button>
<button type="button" class="btn btn-primary" data-make="All">All</button>
</div>
</div>

Number of times a button pressed, should be multiply with variable(recipeTotal) value

I'm working on the Angular 8 application. I want to multiply the numbers of times the button pressed with the existing value of (recipetotal). But it didn't give me correct result.
The result should be => 8*3=24
But the result I'm getting is => 48
Can someone please help me with this.
My TS Code
quantityControl(flag) {
if (flag == '+') {
this.quantity = this.quantity + 1;
if (this.filteredRecipe.RecipePrice === 0) {
this.recipeTotal = this.recipeTotal * this.quantity;
console.log('The price is:'+ this.recipeTotal);
}
} else {
if (this.quantity != 1) {
this.quantity = this.quantity - 1;
if (this.filteredRecipe.RecipePrice === 0) {
this.recipeTotal = this.recipeTotal * this.quantity;
}
}
}
}
My HTML Code
<div class="u-line">
<div class="product-quantity padding-10"><span class="text-light-black fw-700 fs-16">Quantity</span>
<div class="input-group quantity">
<div class="input-group-append">
<button (click)="quantityControl('-')" class="minus-btn" type="button" name="button">
<i class="fas fa-minus"></i>
</button>
</div>
<input type="text" class="text-center" [(ngModel)]="quantity" name="quantity" value="1" style="font-size: 18px; font-weight: bold;">
<div class="input-group-prepend">
<button (click)="quantityControl('+')" class="plus-btn" type="button" name="button"><i
class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
Probably the mistake is in this function evaluating
if (this.filteredRecipe.RecipePrice === 0)
Past it code or check it by yourself.

Condense IF Statement As Seems Over Kill

New To JQuery, i have the following code which i think is a bit over kill as all i'm trying to do i match a returned value to a selection of buttons and add/remove a class.
HTML for days of the week buttons
<div class="form-horizontal" id="selectWeekdaysSection">
<div class="form-group">
<div class="col-md-offset-2 col-lg-4">
<button id="mon" name="weekdaysbutton" class="btn btn-default" type="button" value="Mon">Mon</button>
<button id="tue" name="weekdaysbutton" class="btn btn-default" type="button" value="Tue">Tue</button>
<button id="wed" name="weekdaysbutton" class="btn btn-default" type="button" value="Wed">Wed</button>
<button id="thur" name="weekdaysbutton" class="btn btn-default" type="button" value="Thur">Thur</button>
<button id="fri" name="weekdaysbutton" class="btn btn-default" type="button" value="Fri">Fri</button>
<button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sat">Sat</button>
<button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sun">Sun</button>
</div>
</div>
</div>
Gives this on the site
DataTable data
When i do call and get data back from my DataTable it pre-selects the days from the JSON. I have all this working but as i said seems over kill to have to keep repeating the IF just for a different button especially when i have to do this for days '01 - 31'
Jquery
var selectedDays = modifyRecordData.selectedDays;
var splitSelectedDays = selectedDays.split(',');
splitSelectedDays.forEach(day => {
let val = day.trim();
if(val == 'Mon') {
$('#mon').removeClass('btn-default');
$('#mon').addClass('btn-primary');
}
if (val == 'Tue') {
$('#tue').removeClass('btn-default');
$('#tue').addClass('btn-primary');
}
if (val == 'Wed') {
$('#wed').removeClass('btn-default');
$('#wed').addClass('btn-primary');
}
if (val == 'Thur') {
$('#thur').removeClass('btn-default');
$('#thur').addClass('btn-primary');
}
if (val == 'Fri') {
$('#fri').removeClass('btn-default');
$('#fri').addClass('btn-primary');
}
if (val == 'Sat') {
$('#sat').removeClass('btn-default');
$('#sat').addClass('btn-primary');
}
if (val == 'Sun') {
$('#sun').removeClass('btn-default');
$('#sun').addClass('btn-primary');
}
})
Console.Log of returned data
The technique you want to follow is called Don't Repeat Yourself, or DRY for short.
In this case the day is always the same as the id of the element you want to target, so you can manually build the selector string once from that. You can also use toggleClass() instead of alternate addClass() and removeClass() calls. Try this:
splitSelectedDays.forEach(day => {
let dayName = day.trim().toLowerCase();
$('#' + dayName).toggleClass('btn-default btn-primary');
})

Calling 2 buttons functions in the same form PHP

I implemented a page with 2 buttons which call 2 different functions on their button clicks. But the any of the buttons are not working. They are just reload the same page. I'll put my code down below.
<form class="form-horizontal" id="add_product_form" method="post">
<script>
function submitForm(action)
{
document.getElementById('add_product_form').action = action;
document.getElementById('add_product_form').submit();
}
</script>
<div class="col-sm-12">
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
</div>
Any help would be really appreciated. Thank you! Add_to_cart function which is mentioned above the page.
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
You can do following. Change typesubmit to button And as you already have submitForm() method. Call this method when you want to return true.
Change
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
To
<input type="button" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="button" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
And change your js functions to:
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
And remove submitForm() definition between html and add it to script block

Bootstrap enable button on input

I am having some issues getting this done correctly.
I want my "sendit" button to enable (remove disable) as soon as there is any characters in the box.
I've tried multiple things now but I can not get it to work.
Part of HTML:
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<input id="sendit" class="btn btn-lg btn-primary btn-block disabled" type="submit" value="Generate Codes"></input>
JS File
$(document).ready(function() {
var pass_error = 1;
// Check name field
if (inputPassword === '') {
pass_error = 1;
} else {
pass_error = 0;
}
enableButton();
});
// verzendknop pas activeren nadat alles is ingevuld en gecontroleerd
function enableButton() {
if (pass_error!== 0) {
$('#btn btn-lg btn-primary btn-block').attr('disabled', 'disabled');
} else {
$('#btn btn-lg btn-primary btn-block').removeAttr('disabled');
}
};
});
Your code only checks the field once upon DOM Ready.
You need to tie your check to a keyUp event on that field:
$('my-field').keyUp(function() {
if($(this).val() === '') {
pass_error = 1;
} else {
pass_error = 0;
enableButton();
});

Categories

Resources