npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fng-bootstrap-datetime

v0.12.0-beta.301

Published

datetime input plugin for forms-angular

Downloads

899

Readme

fng-bootstrap-datetime

Plugin for forms-angular that adds datetime picker support.

Usage

bower install fng-bootstrap-datetime

Add the following lines to your index.html (or equivalent) file.

<link rel="stylesheet" href="fng-bootstrap-datetime/fng-bootstrap-datetime.css">
<script src="fng-bootstrap-datetime/fng-bootstrap-datetime.js"></script>

Add fng.uiBootstrapDatetime to the list of servies your Angular module depends on.

In your Mongoose schemas you can set up fields like this:

interviewDate: {type: Date, form:{
  directive: 'fng-ui-bootstrap-datetime-picker', 
  fngUiBootstrapDatetimePicker:{
    'date-format': 'dd-MMM-yyyy',
    'date-options':"{'show-weeks':true}"}
    }
  }
},

Options can be added to a fngUiBootstrapDatetimePicker object within the form object as illustrated by the examples above. A complete list of setting options can be found in the Settings section below. Any setting Date options (see uib-datepicker settings can be added as a JSON string as shown above.

For (my) convenience, the following defaults have been changed from the defaults shown below:

show-button-bar: false, 
show-meridian: false,
date-format: 'dd/MM/yyyy'
showWeeks: false

###Known Limitations:

Styling in (unsupported) Bootstrap 2 applications (such as the forms-angular.org website at the time of writing) has a few issues, including inline help placing and the width of the first columnof the dropdown when weeks are not shown.

##Readme from github.com/zhaber/angular-js-bootstrap-datetimepicker (now Angular 4+ only)

The plugin is based on AngularUI Datepicker and Timepicker.

Demo: Plunker

Date is formatted using the date filter and is localized.

Install

NPM

Run npm install angular-ui-bootstrap-datetimepicker to install. Use the --save option to add it to your package.json's dependencies.

If you're using browserify, you can simply require('angular-ui-bootstrap-datetimepicker') to make it available in your angular project. Ensure that your angular module depends on ui.bootstrap.datetimepicker. You must be using the ui.bootstrap module as well - also availbe via npm.

Also include the stylesheet datetimepicker.css in your html. Note that this is the same stylesheet that the package.json's style declaration has.

Bower

Run bower install angular-ui-bootstrap-datetimepicker --save to persist it to bower.json

Include the ui.bootstrap.datetimepicker module in your app.js file. You must be using the ui.bootstrap module as well.

NuGet

See https://www.nuget.org/packages/Angular-js-bootstrap-datetimepicker/

Usage Sample

// Disable weekend selection
$scope.isDisabledDate = function(currentDate, mode) {
  return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};
<datetimepicker ng-model="date" 
                date-format="dd-MMM-yyyy" 
                date-options="dateOptions" 
                date-disabled="isDisabledDate(date, mode)">
</datetimepicker>

Datetimepicker Settings

  • clear-text (Default: 'Clear') : The text to display for the clear button.

  • close-text (Default: 'Done') : The text to display for the close popup button.

  • current-text (Default: 'Today') : The text to display for the current day button.

  • datepicker-append-to-body (Default: false) : Append the datepicker popup element to body, rather than inserting after datepicker-popup.

  • datepicker-popup-template-url (Default: uib/template/datepickerPopup/popup.html) : Add the ability to override the template used on the component.

  • datepicker-template-url (Default: uib/template/datepicker/datepicker.html) : Add the ability to override the template used on the component (inner uib-datepicker).

  • date-disabled (date, mode) (Default: null) : An optional expression to disable visible options based on passing date and current mode (day|month|year).

  • date-format (Default: 'yyyy-MM-dd') : The format for displayed dates.

  • date-ng-click (Default: null) : A function called when a date input is clicked.

  • date-opened (Default: false) : Whether or not to show the datepicker.

  • date-options attribute. (Default: {}) : Options for datepicker in JSON format. E.g. minDate and maxDate, which define the minimum and maximum available date and time.

  • day-format (Default: 'dd') : Format of day in month.

  • day-header-format (Default: 'EEE') : Format of day in week header.

  • day-title-format (Default: 'MMMM yyyy') : Format of title when selecting day.

  • disabled-date (Defaults: false) : Whether the date input is disabled.

  • hidden-date (Defaults: false) : Whether a user can see the date input.

  • hidden-time (Defaults: false) : Whether a user can see the hours & minutes input.

  • hour-step (Defaults: 1) : Number of hours to increase or decrease when using a button.

  • max-time (Defaults: ['12:59 PM']) : Maximum time for time picker (Date).

  • meridians (Defaults: ['AM', 'PM']) : Meridian labels

  • min-time (Defaults: ['0:00 AM']) : Minumum time for time picker (Date).

  • minute-step (Defaults: 1) : Number of minutes to increase or decrease when using a button.

  • month-format (Default: 'MMMM') : Format of month in year.

  • month-title-format (Default: 'yyyy') : Format of title when selecting month.

  • mousewheel (Defaults: true) : Whether user can scroll inside the hours & minutes input to increase or decrease it's values.

  • ng-model : The date and time object.

  • readonly-date (Defaults: false) : Whether a user can type inside the date input.

  • readonly-time (Defaults: false) : Whether a user can type inside the hours & minutes input.

  • required (Defaults: false) : Whether a non-empty value is required.

  • show-button-bar (Defaults: true) : Whether or not to display a button bar underneath the uib-datepicker..

  • show-meridian (Defaults: true) : Whether to display 12H or 24H mode.

  • show-spinners (Defaults: true) : Shows spinner arrows above and below the inputs.

  • timepicker-template-url (Defaults: uib/template/timepicker/timepicker.html) : Add the ability to override the template used on the component.

  • year-format (Default: 'yyyy') : Format of year in year range.

  • year-range (Default: 20) : Number of years displayed in year selection.