background preloader

Bootstrap Date/Time Picker

Bootstrap Date/Time Picker
Introduction Simple date/time picker component based on the work of Stefan Petre, with contributions taken from Andrew Rowls and jdewit. Demo Code: Similar to above example, but in US date/hour format: Disables date picker: Disables time picker: The widget class provides 4 methods to manipulate dates: ‘getDate’/’setDate’ for working with UTC and ‘getLocalDate’/’setLocalDate’ for working with local dates: // Considering you are on a GMT-3 timezone and the input contains '2000-01-17 10:00'var localDate = picker.getLocalDate(); // localDate === 2000-01-17 07:00var utcDate = picker.getDate(); // utcDate === 2000-01-17 10:00//picker.setLocalDate(new Date(1998, 10, 11, 4, 30)); // input === 1998-10-11 07:30picker.setDate(new Date(Date.UTC(1998, 10, 11, 4, 30))); // input === 1998-10-11 04:30 The date value can be unset by passing ‘null’ to any of the ‘set’ methods or by erasing the input: The only event exposed is ‘changeDate’, which will expose ‘date’ and ‘localDate’ properties on the event object: Related:  Web Design EssentialssabdoulPlugins

blai/foundation Bootstrap datetimepicker Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION() Minimum Setup Code <div class="container"><div class="row"><div class='col-sm-6'><div class="form-group"><div class='input-group date' id='datetimepicker1'><input type='text' class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div><script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script></div></div> Using Locales Custom Formats No Icon (input field only): <div class="container"><div class="row"><div class='col-sm-6'><input type='text' class="form-control" id='datetimepicker4' /></div><script type="text/javascript"> $(function () { $('#datetimepicker4').datetimepicker(); }); </script></div></div> Enabled/Disabled Dates Custom Icons View Mode Min View Mode Disabled Days of the Week Inline

Flippant.js Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Modal » Card » Donec sed odio dui. Whys and hows: Flippant is tiny. Flippant is easily customized. Flippant exports a single function: flip. var front = document.getElementByID('flipthis') , back_content = "<h1>I'm the back! Two modes: card (the default), and modal. back = flippant.flip(front, back_content, 'modal') The back gets the default class of flippant-modal-dark for modal flips and flippant-modal-light for cards. back = flippant.flip(front, back_content, 'modal', 'my-modal-classname') The full API: flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element 74.3% of the magic is in the css file.

Dan Grossman | A Date Range Picker for Twitter Bootstrap While developing Improvely, having all the components of Twitter Bootstrap at hand pre-styled was a great time saver. I was in need of a dropdown menu to choose date ranges for reports, and wanted something that would match the existing dropdown and button styles of Bootstrap: thus came about this date range picker component. Download it at GitHub. For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. In 2013, the Date Range Picker was updated with many new options, including a time picker, min/max dates and max range, localization of all buttons/labels, dropdowns to jump between months/years and more. Usage: The examples below show how to use the (optional) options and callback parameters. Basic Date Range Picker Example Pre-defined Ranges & Callback

WYSIWYG Web Builder PHP database front-end / CRUD generator for MySQL SQLite PostgreSQL - Create a PHP online database application / data entry application without coding - DaDaBIK is a DataBase Interfaces Creator Bootstrap Material Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework. If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas. Read more about Material Design for Bootstrap at the Github page. If you want support the development of this project please consider donate something: Donate with Gratipay Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! Would you like to use this theme for commercial projects? Seems like you are using AdBlock to hide banners... Thanks! You can get this theme downloading the source from Bower: bower install bootstrap-material-design Download Install with NPM - Coming Soon You can also install and manage Material Bootstrap using NPM npm install Install with Bower You can also install and manage Material Bootstrap using Bower Install with Meteor What's included Sound Alarms

How to Select / Deselect All Checkboxes using jQuery If you are newbie developer and looking for a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in Gmail), here’s one that might be useful for your HTML form. I’ve used this one in various occasions and it has proved to be very consistent every time. As you can see in the picture below, we have multiple checkboxes, and we want toggle the select state of checkboxes when we click “Select All” box. What happens in this code is when user clicks “Select All” checkbox, the code first checks the status of checkbox with id “selecctall”, and loops thought each checkbox with class “checkbox1″ and applies “selecctall” checkbox status to all other checkboxes. The jQuery code: The HTML : Demo Selecct All This is Item 1 This is Item 2 This is Item 3 This is Item 4 This is Item 5 This is Item 6 Do not select this Related Articles: Saran Chamling.

CSS Button Generator: Create HTML and CSS Button Styles Moment.js | Parse, validate, manipulate, and display dates in javascript. Bootswatch: Free themes for Bootstrap morris.js Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href=" <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src=" If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site. Your first chart Start by adding a <div> to your page that will contain your chart. Note: in order to display something, you’ll need to have given the div some dimensions. Next add a <script> block to the end of your page, containing the following javascript code: Assuming everything’s working correctly, you should see the following chart on your page: What Next? Check out the rest of the documentation: License Simplified BSD License:

Related: