Enhance your Bootstrap datetimepicker with a custom button similar to Today

Is it possible to include a custom button in the Bootstrap datetimepicker, similar to Today or Week ago options?

For instance, can buttons for Week ago and Yesterday be added?

Visit this Github link for more information.

Answer №1

After some searching, I managed to come up with the following solution:

        $('#route-from-date').datetimepicker({
            autoclose: true,
            language: 'pl'
        });
        $('#route-to-date').datetimepicker({
            autoclose: true,
            language: 'pl',
            //todayBtn: 'ok'
        });
        $('.datetimepicker tfoot').append('<tr><th colspan="7" class="today_">Dzisiaj</th></tr><tr><th colspan="7" class="yesterday">Wczoraj</th></tr><tr><th colspan="7" class=" week">Tydzień</th></tr>');
        $('.datetimepicker tfoot th').on('click',function(){
            var $th = $(this);
            var d = new Date();
            var fd,td;
            if($th.hasClass('yesterday')){
                d.setDate(d.getDate() - 1);
            }
            else if ($th.hasClass('week')){
                d.setDate(d.getDate() - 7);
                fd = d.getFullYear() + '-' + ((d.getMonth()<10)?  '0'+(d.getMonth()+1) : d.getMonth()+1  ) + '-' + ((d.getDate()<10)?  '0'+d.getDate() : d.getDate()  ) + ' 00:00';
                d.setDate(d.getDate() + 7);
                td = d.getFullYear() + '-' + ((d.getMonth()<10)?  '0'+(d.getMonth()+1) : d.getMonth()+1  ) + '-' + ((d.getDate()<10)?  '0'+d.getDate() : d.getDate()  ) + ' 23:59';
            }

            if(!$th.hasClass("week")){
                fd = d.getFullYear() + '-' + ((d.getMonth()<10)?  '0'+(d.getMonth()+1) : d.getMonth()+1  ) + '-' + ((d.getDate()<10)?  '0'+d.getDate() : d.getDate()  ) + ' 00:00';
                td = d.getFullYear() + '-' + ((d.getMonth()<10)?  '0'+(d.getMonth()+1) : d.getMonth()+1  ) + '-' + ((d.getDate()<10)?  '0'+d.getDate() : d.getDate()  ) + ' 23:59';
            }

            $('#route-from-date').val(fd).datetimepicker('update', fd);
            $('#route-to-date').val(td).datetimepicker('update', td);
            $('.datetimepicker').hide();
        });

Answer №2

Here is an example of how you can achieve this:

$('#route-from-date').datetimepicker({
    autoclose: true,
    language: 'pl',
    showTodayButton: true
 });
 $('#route-to-date').datetimepicker({
    autoclose: true,
    language: 'pl',
    showTodayButton: true
 });

For more information, check out the documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing plane geometry for chunking in THREE.js

My goal is to create a world that generates infinitely, similar to how Minecraft operates, using chunks that appear and disappear based on the player's location. I am utilizing a plane that generates points through a combination of Perlin and Simplex ...

incorporate information into D3 with React

Greetings! I am currently working on a line graph that should display dynamic data. In cases where no data is provided, it will simply show a straight line. My current challenge lies in passing the props to the line graph component. var data `[ { &quo ...

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

The error message "net.sf.json.JSONException: A circular reference has been detected in the Struts 2 framework hierarchy"

I am currently utilizing a Struts 2 class that implements ModelDriven. I have succeeded in passing data from jQuery and storing it in the database. However, when attempting to retrieve the data and send it back to jQuery, I encounter an issue where the da ...

Having trouble getting Tailwind CSS to work with React components?

I'm having trouble getting Tailwind CSS to work properly. I've made sure to update to the latest version, but for some reason Tailwind is not functioning and there are no errors showing up in the console. Here is a link to my header component an ...

The React-Native app freezes on the splash screen when running on iOS, while it functions perfectly on Android

My React-Native 0.62.3 app is not working on iOS. It launches, receives the bundle from metro, and then just displays the splash screen without any further action. Here's the run log: flipper: FlipperClient::addPlugin Inspector flipper: FlipperClient: ...

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

Duplicate entries in the angular-ui Calendar

I've implemented the Angular-UI calendar to showcase some events. My activity controller interacts with the backend service to fetch the data, which is then bound to the model. //activity controller $scope.events = []; Activities.get() ...

Ways to align text on the left within a centered format

It seems like there is something missing here. I am struggling to align text to the left in a centered div. Below is an example of my final work: <div class="grid-row"> <img src="http://www.fununlimitedsports.com/wp-content/images/istock ...

Plaid webhook failing to activate

I've been struggling to set up Plaid transaction webhooks in an api, as I can't seem to get any webhooks to trigger. I followed the plaid quickstart code and included the webhook parameter: Plaid.create({ apiVersion: "v2", clientName: ...

Issue with nodejs routing: res.redirect causing a 404 error instead of proper redirection

Recently, I started working on a web application using nodejs, express, and mongodb as a beginner. Below is a snippet of my app.js file: var express = require('express'); var path = require('path'); var favicon = require('serve-fa ...

PHP offers a different solution instead of using an HTML hidden input tag

Is there a way to pass a value from one HTML form to another without using hidden input fields? I need this value for a prepared SQL statement. I'm concerned about security risks associated with using hidden input fields. Does anyone have an alternat ...

The moment a connection is established, the link abruptly vanishes - NodeJS and MYSQL

Lately, I've been facing a persistent issue with my node application that suddenly started crashing every time a connection is established. This problem emerged out of nowhere after my application had been running smoothly for months. The crash occurr ...

Although my header remains stationary, my body content flows smoothly as I scroll

After applying a high z-index to the header, it appears beautifully, but unfortunately, none of the links in other divs are clickable. I seem to be missing something obvious, yet can't pinpoint the issue. Any assistance would be greatly appreciated! ...

Retrieve secondary data points from a JSON object

I am in the process of creating selectboxes using information from a JSON string. I am trying to figure out how to extract the second level data from a string and incorporate it into the selectboxes. Here is an example: JSON { "product": { opt ...

What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox. I attempted using top: 0 or adjusting the flex-direction to column. .container { position: relative; } .top { display: flex; justify-content: space-b ...

Sequencing animations with *ngIf in Angular 6

In my component, there are two elements that utilize the same fade animation. Only one element is visible on screen at a time, controlled by *ngIf directives for visibility management. The animation is a simple fade in/fade out effect. When the state of m ...

The Vue v-for directive encountered an unrecognized property during rendering

Trying to grasp the concept of v-for in Vue JS, especially since I am a newcomer to this framework. Since I am utilizing Django, custom delimiters are necessary. I have a script example that appends a list of objects to a data property: var app = new Vue( ...

Adjust the height of a TextField component in material-ui

index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class Sear ...

Changing the value of a button using the slideToggle() function

Currently, I am experimenting with this example. Is there a way for me to modify the button text using the slideToggle() function? My goal is to switch the text between Show and Hide. Below is my current code snippet: <button id="boxToggle">Show&l ...