Shubham Ankit

Shubham Ankit

1566529705

Best JS Color Picker Libraries

Originally published by Deven Rathore  at dunebook.com

Color is part and parcel of the online world. Brands are all identified by their colors and preferred color schemes. Thank the heavens for JavaScript color picker libraries that help us the color codes of any color that we intend to use and apply on our web projects. By playing around or keying in the frequency values of the RGB (Red, Green, and Blue) mode you get your desired colors.

Table of Contents

  • 1. ColorPicker (v. 1.0)
  • 2. Evol- ColorPicker
  • 3. Jscolor – Javascript Web Color Picker
  • 4. Farbtastic Color Picker
  • 5. Pick-a-color for Twitter Bootstrap
  • 6. ColorJoe – Scalable Color Picker
  • 7. FlexiColor Picker
  • 8. PhotoShop-like JavaScript Color Picker
  • 9. Tiny Colorpicker
  • 10. Spectrum
  • 11. ColorPick.js
  • 12. Named Color Picker
  • Conclusion

The JavaScript color picker libraries come to the fore as they allow you to get your desired color value by simply clicking on the color provided and applying the resulting RGB values to your web projects.

1. ColorPicker (v. 1.0)

ColorPicker is a highly intuitive, convenient and lightweight JS framework independent color picking tool. With its multiple capabilities that cover color conversion and calculation, ColorPicker fully supports a bad range of colors spaces. Whatever you may need be it HSV, HSL, RGB, XYZ, HEX, LAB, CMY or CMYK, ColorPicker will deliver the results for you.

ColorPicker presents you with a color test or demo area where you can use the ColorPicker UI and test patches to get the color codes for the colors you pick out and test.

Working with ColorPicker is a breeze. You will discover that it has;

  • Four different UI sizes, the advanced, smaller, simple and tiny allow for both detailed expert use and simplified general color picking,
  • A great selection of color spaces for greater visualization RGB, HSV, and HSL,
  • A cursor rendering that is supportive, fast and responsive
  • Color comparison tools that are practical
  • A range of options and API allowing for non-conventional customization to suit individual needs
  • A design that aims at capturing all possible scenarios while presenting the best of relevant data

Visit Website 

2. Evol- ColorPicker

Evol-ColorPicker is highly useful and adaptable color picker library that you can use inline or preferably as a pop that you can bind to a text box. Evol-ColorPicker pushes all the right buttons when it comes to having “transparent color support, multiple color palette selection, and color history tracker.

As a fully-fledged UI widget, it also comes with themes and configurations that you can tweak to suit your preferences.

One thing you will also note about Evol-ColorPicker is its uncanny resemblance to Microsoft’s 2010 color picker version.

To get Evol-ColorPicker you can download it from their website, fork it at GitHub, use an npm package or install it with bower.

Via GitHub git clone https://github.com/evoluteur/colorpicker
Via npm package installation npm install evol-colorpicker
Via bower installation bower install evol-colorpicker

Visit Website

3. Jscolor – Javascript Web Color Picker

With the aim of being super easy to use, jscolor is one of the web color pickers that are aimed at giving developers the smoothest of experience in installation and end use of the component.

The simplicity and ease of use hide some great things about jscolor that you shouldn’t pass you.

Jscolor is a totally self-sufficient JS library. A single JS file works colorful wonders without the need for other frameworks like MooTools, jQuery, Dojo, and the likes. Though it doesn’t depend on other frameworks, JScolor is still a good neighbor and does coexist fine with them around.

Jscolor supports all the latest browsers available, Safari, Opera, Firefox, Chrome, Internet Explorer 7 and above.

Customize jscolor to suit your web project at every level you need. You can adjust the size or color of the color picker or even append a function to the onchange event.

Touch devices have also been factored into the workings of jscolor. Jscolor supports touch events and will seamlessly work on your modern tablet or smartphone device.

Visit Website 

4. Farbtastic Color Picker

Farbtastic presents you with a color picking plugin that will add a single or several color picker widgets onto your web project via JavaScript. By linking each widget to existing elements such as text fields, the element value will update automatically when a color is picked.

Insert a ready () handler to your project. The handler will initialize and then link color picker to the text field.

 //The syntax will appear as follows: < script type="text/javascript"> $(document).ready(function() { $('#colorpicker').farbtastic('#color'); }); </ script > 

JsCopy

Visit Website 

5. Pick-a-color for Twitter Bootstrap

Anyone can use the Pick-a-color color picker library as it was fundamentally built with the aim of being as simple and user-friendly as possible. The lovely interface that greets you is based on the Twitter Bootstrap style.

Through a simple download process, you have the color picker file that you can include in the HTML of your web project then go ahead and use it from there.

As a Pick-a-color user, you will enjoy the color picker’s memory that remembers and stores 16 colors that you have recently used.

The basic color palette presents no hassle. Lighten or darken the preset colors to meet your fancy.

The advanced palette adds some punch to your color selections by allowing you to control the hue, saturation, and spectrum so as to achieve whatever color you desire.

Pick-a-color also employs a quick, lightweight JS color converter and manipulator (Tiny Color) that allows you to work with HSV, RGB, HSVA, HSL, and other names.

The tried and tested part has been done with flying colors and it can be confidently said that Pick-a-color works great in IE 8+, Chrome (Mac/PC/iOS), Firefox (Mac/PC), Safari (Mac/iOS), and Opera (Mac/PC).

Initialize with ease by entering only one line of JS and three lines of HTML. You also don’t have to worry about jumbling up your code as the namespaced CSS and anonymous JS function won’t harm your code.

Visit Website 

6. ColorJoe – Scalable Color Picker

Instantaneous color picking is what colorjoe offers. Get color RGB or other color mode values as you select and click on color selection area.

The scalability of colorjoe is on another level. This is because colorJoe does not depend on eternal images and is based on CSS. So go ahead and modify colojoe’s size using CCS to suit your needs as you enjoy the AMD module definition and touch support it also offers.

Get your installation of colorjoe;

npm i colorjoe

For a preferred standalone dist, add the following to your page; prepackaged  dist/colorjoe.js  and  css/colorjoe.css

Alternatively, load the dependencies from src/ using AMD.

Visit Website 

7. FlexiColor Picker

FlexiColorPicker is a simple color picker library that is based on the HSV color model. This color picker is simple consisting of only two sections, the slider, and picker. The picker allows you to select the saturation and values while the slider gives you the option of selecting hue values.

As you switch between the colors on the picker and slider, the background color of the web page changes to match your selection. This overall background color change helps you visually gauge the color blend balance and appeal for your web project.

Visit Website 

8. PhotoShop-like JavaScript Color Picker

As its name suggests this color pickers interface looks pretty much like the one found in Adobe Photoshop. PhotoShop-like JavaScript Color Picker presents a depth of color option that is unique and unavailable other JS color pickers around. You will be gifted with a full array of HSB and RGB color options here.

Color select and pick on the left side of the color picker portion and have your color code displayed on the boxes on the right-hand side.

The JS that has been put together for this color picker consists of a slider controller, an input handler, color methods, and a ColorPicker object that packs it all together.

Visit Website 

9. Tiny Colorpicker

If you are looking for color picker library that has cross-browser support then Tiny Colorpicker is the choice for you here. This JS color library comes in two versions the vanilla Javascript microlib and the jQuery plugin.

The basic Javascript microlib, however, lacks support for legacy type browsers like IE6-8. Alternatively, if you require browser support you are better placed working with the jQuery plugin.

While using Tiny Colorpicker you can expect to experience a color library that is;

  • easy to customize
  • useable inside or outside forms
  • supports requirejs, Node, commonjs and AMD
  • lightweight
  • supports Windows Phone, Android and IOS

Visit Website 

10. Spectrum

The Spectrum color picker library was developed as a JS color picking solution that deviated from the norm of images, large plugins, and unfriendly customization options.

Interestingly this color picker is available inside the dev tools of Firefox, Chrome, and Safari and this makes it quite easy for you to pick colors for your web project.

With only two files that won’t interfere with your existing code in any way, you are well on your way with this color picker that is truly lightweight.

Even though Spectrum works 100% well without any customizations on your part you still have the option available to modify it using CSS with various options and modes available for exploration.

 

Visit Website 

11. ColorPick.js

Another player in the colorpicking game is ColorPick.js, a minimalistic and simple jQuery plugin that was designed to sit today’s modern web.

ColorPick.js features local storage of colors that you have recently used, integration that is simple and an exquisite design that will definitely blend in with your web projects.

Visit Website 


12. Named Color Picker

Named ColorPicker presents a different method of color selection. You won’t get the usual color spectrum or wheel; here you will get a fullscreen grid of colors arranged by name. Searching can be done via a dropdown list or by name.

You won’t find any duplicate names or colors in the entire color grid of 2,065 colors. The color names presented in the Named ColorPicker come courtesy of the color survey from XKCD and Resene Paints. The extra color names include those from the CSS3 spectrum that all major browsers support.

Visit Website 


Conclusion

The JavaScript Color Pickers listed above are meant to help you save time and improve your efficiency as you work. With plenty of options available all you need to do is just chose one and get going.

Originally published by Deven Rathore  at dunebook.com

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ JavaScript: Coding Challenges Bootcamp - 2019

☞ The Complete Node.js Developer Course (3rd Edition)

☞ Angular & NodeJS - The MEAN Stack Guide

☞ NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

☞ Node.js Absolute Beginners Guide - Learn Node From Scratch

#javascript #web-development

What is GEEK

Buddha Community

Best JS Color Picker Libraries

João Pedro

1610029584

Nice article, thanks for sharing! I have build one, check it out: https://jsuites.net/v3/color-picker

bindu singh

bindu singh

1647351133

Procedure To Become An Air Hostess/Cabin Crew

Minimum educational required – 10+2 passed in any stream from a recognized board.

The age limit is 18 to 25 years. It may differ from one airline to another!

 

Physical and Medical standards –

  • Females must be 157 cm in height and males must be 170 cm in height (for males). This parameter may vary from one airline toward the next.
  • The candidate's body weight should be proportional to his or her height.
  • Candidates with blemish-free skin will have an advantage.
  • Physical fitness is required of the candidate.
  • Eyesight requirements: a minimum of 6/9 vision is required. Many airlines allow applicants to fix their vision to 20/20!
  • There should be no history of mental disease in the candidate's past.
  • The candidate should not have a significant cardiovascular condition.

You can become an air hostess if you meet certain criteria, such as a minimum educational level, an age limit, language ability, and physical characteristics.

As can be seen from the preceding information, a 10+2 pass is the minimal educational need for becoming an air hostess in India. So, if you have a 10+2 certificate from a recognized board, you are qualified to apply for an interview for air hostess positions!

You can still apply for this job if you have a higher qualification (such as a Bachelor's or Master's Degree).

So That I may recommend, joining Special Personality development courses, a learning gallery that offers aviation industry courses by AEROFLY INTERNATIONAL AVIATION ACADEMY in CHANDIGARH. They provide extra sessions included in the course and conduct the entire course in 6 months covering all topics at an affordable pricing structure. They pay particular attention to each and every aspirant and prepare them according to airline criteria. So be a part of it and give your aspirations So be a part of it and give your aspirations wings.

Read More:   Safety and Emergency Procedures of Aviation || Operations of Travel and Hospitality Management || Intellectual Language and Interview Training || Premiere Coaching For Retail and Mass Communication |Introductory Cosmetology and Tress Styling  ||  Aircraft Ground Personnel Competent Course

For more information:

Visit us at:     https://aerofly.co.in

Phone         :     wa.me//+919988887551 

Address:     Aerofly International Aviation Academy, SCO 68, 4th Floor, Sector 17-D,                            Chandigarh, Pin 160017 

Email:     info@aerofly.co.in

 

#air hostess institute in Delhi, 

#air hostess institute in Chandigarh, 

#air hostess institute near me,

#best air hostess institute in India,
#air hostess institute,

#best air hostess institute in Delhi, 

#air hostess institute in India, 

#best air hostess institute in India,

#air hostess training institute fees, 

#top 10 air hostess training institute in India, 

#government air hostess training institute in India, 

#best air hostess training institute in the world,

#air hostess training institute fees, 

#cabin crew course fees, 

#cabin crew course duration and fees, 

#best cabin crew training institute in Delhi, 

#cabin crew courses after 12th,

#best cabin crew training institute in Delhi, 

#cabin crew training institute in Delhi, 

#cabin crew training institute in India,

#cabin crew training institute near me,

#best cabin crew training institute in India,

#best cabin crew training institute in Delhi, 

#best cabin crew training institute in the world, 

#government cabin crew training institute

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

渚  直樹

渚 直樹

1650810960

Angular Datepicker:Angular13でDatepickerを使用する方法

Angular Materialは、 Webモバイルデスクトップで機能 する重要で最新のUIコンポーネントを備えた地上運用です。 

Angular Materialコンポーネントは、ブラウザーの移植性と互換性、デバイスの独立性、適切な機能低下などの最新のWebデザイン原則を維持しながら、魅力的なUIUX、一貫性のある機能的なWebページ、およびWebアプリケーションを構築するのに役立ちます。

Angular Datepicker

Angular Datepickerは、テキスト入力またはカレンダーから日付を選択して日付を入力できる組み込みのマテリアルコンポーネントです。Angular Material Datepickerを使用すると、ユーザーはテキスト入力またはカレンダーから日付を選択して日付を入力できます。Material Datepickerは、連携して機能するいくつかのコンポーネントとディレクティブで構成されています。

これは、連携して機能するさまざまな角度コンポーネントとディレクティブで構成されています。まず、Angularをインストールする必要があります。 AngularCLIを使用して Angularをインストールしてい ます。

ステップ1:AngularCLIをインストールします。

次のコマンドを入力します。

npm install -g @angular/cli

次に、次のコマンドを使用してAngularプロジェクトを作成します。

 

ng new datepicker

ステップ2:他のライブラリをインストールします。

プロジェクトに移動し、次のコマンドを使用してhammerjs をインストールし ます。

npm install --save hammerjs

Hammer.jsはオプションの依存関係であり、いくつかのコンポーネントのタッチサポートに役立ちます。

次に、次のコマンドを使用してAngularMaterial と AngularAnimations をインストール します。

npm install --save @angular/material @angular/animations @angular/cdk

ここで、  angular.json ファイル内に hammerjs を含めます。このファイルはプロジェクトのルートにあります。

ステップ3:作成済みのテーマとマテリアルアイコンをインポートします。

Angular Materialには、いくつかの事前に作成されたテーマが付属しています。これらのテーマは、色と基本的なスタイリングを際立たせています。

利用可能な主なテーマは、 インディゴピンク、 ディープパープルアンバー、 パープルグリーン、 ピンク ブルーグレーです。

テーマをインポートするには、次のコードをグローバル styles.css ファイルに追加します。ファイルはsrc フォルダー内にあります。

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

マテリアルデザインアイコンにアクセスして、 <mat-icon> コンポーネント で名前付きアイコンを使用 することもできます。

それらをプロジェクトにインポートする場合は、これをプロジェクトのルート index.html ファイルのheadセクションに追加できます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Datepicker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <app-root></app-root>
</body>
</html>

ステップ4:カスタムマテリアルモジュールファイルを作成します。

src、>> app フォルダー内に、 material.module.ts というファイルを1つ作成 し、次のコードを追加します。

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})

export class MaterialModule {}

MatDatepickerModule、MatNativeDateModule、 およびAngularDatepickerサンプル アプリに必要なその他のコンポーネントを インポートしました。

必要に応じて、将来的にコンポーネントを追加できます。

このファイルにはすべてのマテリアルコンポーネントを 簡単に含めることができるため、このファイルは独自に作成され、このファイルはapp.module.ts内にインポートされます。

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [ MatDatepickerModule ],
})

export class MaterialModule {}

ステップ5:App.module.tsファイルにMaterialModuleをインポートします。

app.module.ts ファイル内にMaterialModuleをインポートします。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

また、最後に、app.component.html ファイル内にDatepickerHTMLコードを記述します。

<!-- app.component.html -->

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

ファイルを保存し、ターミナルまたはcmdに移動して、AngularDevelopmentServerを起動します。

ng serve --open

AngularDatepickerの例|  AngularでDatepickerを使用する方法

ブラウザに移動すると、次の画像のようなものが表示されます。

Angular6Datepickerサンプルチュートリアルステップ6:日付ピッカーを入力に接続する

日付ピッカーは、テキスト入力とカレンダーポップアップで構成され、テキスト入力のmatDatePicker プロパティを介して接続されます。

<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>

オプションの日付ピッカートグルボタンが利用可能です。上記の例にトグルボタンを追加できます。

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

<mat-form-field>の一部である入力でも同じように機能し、トグルボタンをマテリアル入力のプレフィックスまたはサフィックスとして簡単に使用できます。

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

ステップ7:カレンダーの開始ビューを設定する

 <mat-datepicker>の startViewプロパティを使用して、カレンダーを最初に開いたときに表示される外観を設定できます。月、 、または 複数年に構成できます 。デフォルトでは、月表示を開始します。

カレンダーが開く月、年、または年の範囲は、最初に日付が現在選択されているかどうかを確認することによって決定され、選択されている場合は、その日付を含む月または年が開きます。それ以外の場合は、1か月または1年で開き、今日の日付を提供します。

この動作は、 <mat-datepicker>のstartAt プロパティを使用して簡単にオーバーライドできます。この場合、カレンダーは startAt 日付を含む月または年に開きます。

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

AngularMaterialDatepickerサンプルチュートリアル

コードはGithubにあります。

GITHUBコード

AngularDatepickerの検証

3つのプロパティにより、日付検証がdatepicker入力に追加されます。

最初の2つは、最小プロパティと最大プロパティです。

また、入力の検証を強制するために、これらのプロパティは、それぞれの値の前後のカレンダーポップアップのすべての日付を無効にし、ユーザーが最小または最大の日付を含む月または年(現在のビューに応じて)を超えてカレンダーを進めるのを防ぎます。

次のHTMLマークアップを参照してください。

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 また、上記のマークアップに関連するtypescriptファイルも参照してください。

import {Component} from '@angular/core';

/** @title Datepicker with min & max validation */
@Component({
  selector: 'datepicker-min-max-example',
  templateUrl: 'datepicker-min-max-example.html',
  styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

日付検証を追加する2番目の方法は、datepicker入力のmatDatepickerFilterプロパティを使用することです。

このプロパティは、<D> =>ブール値の関数を受け入れます(<D>は、datepickerで使用される日付型です。日付の実装の選択を参照してください)。

真の結果は日付が有効であることを示し、偽の結果は日付が有効でないことを示します。

繰り返しますが、これにより、無効なカレンダーの日付も無効になります。

ただし、matDatepickerFilterを使用する場合とminまたはmaxを使用する場合の重要な違いは、特定のポイントの前後のすべての日付を除外しても、ユーザーがそのポイントを超えてカレンダーを進めることを妨げないことです。

次のコード例を参照してください。最初にHTMLマークアップを参照してください。

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 ここで、上記のマークアップに関連するTypescriptファイルを参照してください。

import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

この例では、ユーザーは2005年を過ぎて戻ることができますが、それ以前のすべての日付は選択できなくなります。彼らは2000年よりもカレンダーに戻ることはできません。

最小値の前、最大値の後、またはフィルターで除外された日付を手動で入力すると、入力に検証エラーが発生します。

各検証プロパティには、チェックできる異なるエラーがあります。

  1. たとえば、minプロパティに違反する値には、matDatepickerMinエラーがあります。
  2. maxプロパティに違反する値には、matDatepickerMaxエラーがあります。
  3. matDatepickerFilterプロパティに違反する値には、matDatepickerFilterエラーがあります。

角度入力および変更イベント

入力のネイティブ(入力)および(変更)イベントは、入力要素とのユーザーインタラクションのみをトリガーします。ユーザーがカレンダーポップアップから日付を選択しても、これらは起動しません。

したがって、datepicker入力は、(dateInput)および(dateChange)イベントもサポートします。これらは、ユーザーが入力またはポップアップのいずれかを操作したときにトリガーされます。

(dateInput)イベントは、ユーザーがカレンダーから日付を入力または選択したために値が変更されるたびに発生します。同様に、(dateChange)イベントは、ユーザーが入力の入力を終了するたびに(<input>ブラーで)、またはユーザーがカレンダーから日付を選択したときに発生します。

次のHTMLマークアップを参照してください。

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<div class="example-events">
  <div *ngFor="let e of events">{{e}}</div>
</div>

 次に、そのマークアップに関連するtypescriptファイルを参照してください。

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Datepicker input and change events */
@Component({
  selector: 'datepicker-events-example',
  templateUrl: 'datepicker-events-example.html',
  styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
  events: string[] = [];

  addEvent(type: string, event: MatDatepickerInputEvent) {
    this.events.push(`${type}: ${event.value}`);
  }
}

AngularDatepickerの一部を無効にする

他の標準の<input>と同様に、disabledプロパティを追加することで、datepicker入力を無効にすることができます。

デフォルトでは、<mat-datepicker>と<mat-datepicker-toggle>は<input>から無効な状態を継承しますが、これは、datepickerまたはtoggle要素にdisabledプロパティを設定することでオーバーライドできます。

これは、テキスト入力を無効にしたいが、カレンダーを介した選択を許可したい場合、またはその逆の場合に非常に便利です。

次のHTMLマークアップを参照してください。

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
    <mat-datepicker #dp2></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</p>

 ここで、typescriptファイルを参照してください。

import {Component} from '@angular/core';

/** @title Disabled datepicker */
@Component({
  selector: 'datepicker-disabled-example',
  templateUrl: 'datepicker-disabled-example.html',
  styleUrls: ['datepicker-disabled-example.css'],
})
export class DatepickerDisabledExample {}

このチュートリアルは以上です。 

ソース:https ://appdividend.com/2022/02/16/angular-datepicker/

#angular 

How To Use Datepicker In Angular for Beginners

Angular Datepicker is a built-in material component that allows us to enter the date through text input or by choosing the date from a calendar. Angular Material Datepicker allows users to enter the date through text input or by choosing the date from the calendar. The Material Datepicker comprises several components and directives that work together.

It is made up of various angular components and directives that work together. First, we need to install AngularWe are using Angular CLI to install the Angular.

1: Install the Angular CLI.

Type the following command.

npm install -g @angular/cli

Now, create the Angular project using the following command.

ng new datepicker

2: Install other libraries.

Go into the project and install the hammerjs using the following command.

npm install --save hammerjs

Hammer.js is the optional dependency and helps with touch support for a few components.

Now, install Angular Material and Angular Animations using the following command.

npm install --save @angular/material @angular/animations @angular/cdk

Now, include hammerjs inside the angular.json file. You can find this file at the root of the project.

3: Import a pre-built theme and Material icons.

Angular Material comes with some pre-built themes. These themes have set off the colors and basic styling.

The main available themes are indigo-pink, deeppurple-amber, purple-green, and pink-bluegrey.

To import the theme, you can add the following code to your global styles.css file. The file is inside the src folder.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

You can also access the Material Design icons and use named icons with a <mat-icon> component.

If we want to import them to your project, we can add this to the head section of your project’s root index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Datepicker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <app-root></app-root>
</body>
</html>

4: Create a Custom Material Module File.

Inside the src,>> app folder, create one file called material.module.ts and add the following code.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})

export class MaterialModule {}

We have imported MatDatepickerModule, MatNativeDateModule, and other components that we need in our Angular Datepicker Example App.

We can add additional components in the future if we need to.

This file is written on its own because it is easy to include all the Material components in this file, and then this file will be imported inside the app.module.ts.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [ MatDatepickerModule ],
})

export class MaterialModule {}

5: Import MaterialModule in an app.module.ts file.

Import MaterialModule inside the app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, finally, write the Datepicker HTML code inside the app.component.html file.

<!-- app.component.html -->

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Save the file, go to a terminal or cmd, and start Angular Development Server.

ng serve --open

Angular Datepicker Example | How To Use Datepicker In Angular

Go to the browser, and see something like the below image.

Angular 6 Datepicker Example Tutorial

6: Connecting a datepicker to an input

A datepicker comprises text input and a calendar popup, connected via the matDatePicker property on the text input.

<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>

There is an optional datepicker toggle button available. The toggle button can be added to the example above:

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

It works the same with an input that is part of a <mat-form-field> and a toggle button can easily be used as a prefix or suffix on the material input:

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

7: Setting the calendar starting view

The startView property of <mat-datepicker> could be used to set the look that will show up when the calendar first opens. It can be configured to month, year, or multi-year; by default, it will begin to month view.

A month, year, or range of years that a calendar opens to is determined by first checking if any date is currently selected, and if so, it will open to a month or year containing that date. Otherwise, it will open in a month or year, providing today’s date.

This behavior can be easily overridden using the startAt property of <mat-datepicker>. In this case, a calendar will open to the month or year containing the startAt date.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

Angular Material Datepicker Example Tutorial

You can find the code on Github.

Angular Datepicker Validation

Three properties add the date validation to the datepicker input.

The first two are the min and max properties.

Also, to enforce validation on input, these properties will disable all the dates on the calendar popup before or after the respective values and prevent the user from advancing the calendar past the month or year (depending on current view) containing the min or max date.

See the following HTML markup.

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 Also, see the typescript file related to the above markup.

import {Component} from '@angular/core';

/** @title Datepicker with min & max validation */
@Component({
  selector: 'datepicker-min-max-example',
  templateUrl: 'datepicker-min-max-example.html',
  styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

The second way to add the date validation is by using the matDatepickerFilter property of the datepicker input.

This property accepts a function of <D> => boolean (where <D> is the date type used by the datepicker, see Choosing a date implementation).

A true result indicates that the date is valid, and a false result suggests that it is not.

Again this will also disable the dates on a calendar that are invalid.

However, a critical difference between using matDatepickerFilter vs. using min or max is that filtering out all dates before or after a certain point will not prevent a user from advancing a calendar past that point.

See the following code example. See first the HTML markup.

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 Now, see the Typescript file related to the above markup.

import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

In this example, the user can go back past 2005, but all of the dates before then will be unselectable. They will not be able to go further back in the calendar than 2000.

If they manually type in a date before the min, after the max, or filtered out, the input will have validation errors.

Each validation property has a different error that can be checked:

  1. For example, the value that violates a min property will have the matDatepickerMin error.
  2. The value that violates a max property will have the matDatepickerMax error.
  3. The value that violates a matDatepickerFilter property will have the matDatepickerFilter error.

Angular Input and change events

The input’s native (input) and (change) events will only trigger user interaction with the input element; they will not fire when the user selects the date from the calendar popup.

Therefore, a datepicker input also has support for (dateInput) and (dateChange) events — these triggers when a user interacts with either an input or the popup.

The (dateInput) event will fire whenever the value changes due to the user typing or selecting a date from the calendar. Likewise, the (dateChange) event will fire whenever the user finishes typing input (on <input> blur) or when a user chooses the date from a calendar.

See the following HTML Markup.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<div class="example-events">
  <div *ngFor="let e of events">{{e}}</div>
</div>

 Now, see the typescript file related to that markup.

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Datepicker input and change events */
@Component({
  selector: 'datepicker-events-example',
  templateUrl: 'datepicker-events-example.html',
  styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
  events: string[] = [];

  addEvent(type: string, event: MatDatepickerInputEvent) {
    this.events.push(`${type}: ${event.value}`);
  }
}

Disabling parts of the Angular Datepicker

As with any standard <input>, it is possible to disable the datepicker input by adding the disabled property.

By default, the <mat-datepicker> and <mat-datepicker-toggle> will inherit their disabled state from the <input>, but this can be overridden by setting a disabled property on the datepicker or toggle elements.

This is very useful if you want to disable the text input but allow selection via the calendar or vice-versa.

See the following HTML Markup.

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
    <mat-datepicker #dp2></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</p>

 Now, see the typescript file.

import {Component} from '@angular/core';

/** @title Disabled datepicker */
@Component({
  selector: 'datepicker-disabled-example',
  templateUrl: 'datepicker-disabled-example.html',
  styleUrls: ['datepicker-disabled-example.css'],
})
export class DatepickerDisabledExample {}

That’s it for this tutorial.

Saul  Alaniz

Saul Alaniz

1650810840

Angular Datepicker: Cómo Usar Datepicker En Angular 13

Angular Material  está funcionando desde cero con componentes de interfaz de usuario significativos y modernos que funcionan en la web , dispositivos móviles y computadoras de escritorio

Los componentes de Angular Material nos ayudarán a construir una interfaz de usuario y una experiencia de usuario atractivas , páginas web y aplicaciones web consistentes y funcionales, manteniendo los principios de diseño web modernos, como la portabilidad y compatibilidad del navegador, la independencia del dispositivo y la degradación elegante.

Selector de fecha angular

Angular Datepicker es un componente de material incorporado que nos permite ingresar la fecha a través de la entrada de texto o eligiendo la fecha de un calendario. Angular Material Datepicker permite a los usuarios ingresar la fecha a través de la entrada de texto o eligiendo la fecha del calendario. Material Datepicker consta de varios componentes y directivas que funcionan juntos.

Se compone de varios componentes angulares y directivas que funcionan en conjunto. Primero, necesitamos instalar Angular. Estamos usando  Angular CLI para instalar  Angular.

Paso 1: Instale la CLI angular.

Escriba el siguiente comando.

npm install -g @angular/cli

Ahora, crea el proyecto Angular usando el siguiente comando.

 

ng new datepicker

Paso 2: Instale otras bibliotecas.

Ingrese al proyecto e instale  hammerjs  usando el siguiente comando.

npm install --save hammerjs

Hammer.js es la dependencia opcional y ayuda con la compatibilidad táctil para algunos componentes.

Ahora, instale  Angular Material Angular Animations  usando el siguiente comando.

npm install --save @angular/material @angular/animations @angular/cdk

Ahora, incluya  hammerjs  dentro del  archivo angular.json  . Puede encontrar este archivo en la raíz del proyecto.

Paso 3: importa un tema preconstruido e íconos de materiales.

Angular Material viene con algunos temas prediseñados. Estos temas han resaltado los colores y el estilo básico.

Los principales temas disponibles son  rosa índigoámbar morado oscuro ,  verde púrpura  y  gris azulado rosa .

Para importar el tema, puede agregar el siguiente código a su archivo global  styles.css  . El archivo está dentro de la carpeta src  .

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

También puede acceder a los íconos de Material Design  y usar íconos con nombre con un   componente <mat-icon> .

Si queremos importarlos a su proyecto, podemos agregar esto a la sección principal del   archivo raíz index.html de su proyecto.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Datepicker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Paso 4: cree un archivo de módulo de material personalizado.

Dentro de la carpeta src,>> app  , cree un archivo llamado  material.module.ts  y agregue el siguiente código.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})

export class MaterialModule {}

Hemos importado MatDatepickerModule, MatNativeDateModule  y otros componentes que necesitamos en nuestra  aplicación de ejemplo Angular Datepicker  .

Podemos agregar componentes adicionales en el futuro si es necesario.

Este archivo se escribe solo porque es fácil incluir todos los componentes de Material en este archivo, y luego este archivo se importará dentro de  app.module.ts.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [ MatDatepickerModule ],
})

export class MaterialModule {}

Paso 5: importe MaterialModule en un archivo app.module.ts.

Importe MaterialModule dentro del archivo app.module.ts  .

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Además, finalmente, escriba el código HTML de Datepicker dentro del archivo app.component.html  .

<!-- app.component.html -->

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Guarde el archivo, vaya a una terminal o cmd e inicie Angular Development Server.

ng serve --open

Ejemplo de selector de fecha angular |  Cómo usar el selector de fechas en Angular

Vaya al navegador y vea algo como la imagen de abajo.

Tutorial de ejemplo de selector de fechas de Angular 6Paso 6: Conectar un selector de fechas a una entrada

Un selector de fecha consta de entrada de texto y una ventana emergente de calendario, conectados a través de la propiedad matDatePicker  en la entrada de texto.

<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>

Hay un botón de alternar selector de fecha opcional disponible. El botón de alternar se puede agregar al ejemplo anterior:

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

Funciona de la misma manera con una entrada que es parte de un <mat-form-field> y un botón de alternar se puede usar fácilmente como prefijo o sufijo en la entrada de material:

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

Paso 7: Configuración de la vista de inicio del calendario

La  propiedad startView  de <mat-datepicker> podría usarse para establecer el aspecto que se mostrará cuando se abra el calendario por primera vez. Puede configurarse para  mesañovarios años ; de forma predeterminada, comenzará a ver el mes.

Un mes, año o rango de años en los que se abre un calendario se determina comprobando primero si alguna fecha está actualmente seleccionada y, de ser así, se abrirá en un mes o año que contenga esa fecha. De lo contrario, se abrirá en un mes o año, proporcionando la fecha de hoy.

Este comportamiento se puede anular fácilmente usando la  propiedad startAt de <mat-datepicker> . En este caso, se abrirá un calendario en el mes o año que contiene la  fecha startAt  .

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

Tutorial de ejemplo de selector de fecha de material angular

Puedes encontrar el código en Github.

CÓDIGO GITHUB

Validación de selector de fecha angular

Tres propiedades agregan la validación de fecha a la entrada del selector de fecha.

Los dos primeros son las propiedades min y max .

Además, para hacer cumplir la validación en la entrada, estas propiedades deshabilitarán todas las fechas en la ventana emergente del calendario antes o después de los valores respectivos y evitarán que el usuario avance el calendario más allá del mes o año (según la vista actual) que contiene la fecha mínima o máxima. .

Consulte el siguiente marcado HTML.

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 Además, consulte el archivo mecanografiado relacionado con el marcado anterior.

import {Component} from '@angular/core';

/** @title Datepicker with min & max validation */
@Component({
  selector: 'datepicker-min-max-example',
  templateUrl: 'datepicker-min-max-example.html',
  styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

La segunda forma de agregar la validación de fecha es usando la propiedad matDatepickerFilter de la entrada del selector de fecha.

Esta propiedad acepta una función de <D> => booleano (donde <D> es el tipo de fecha utilizado por el selector de fecha, consulte Elección de una implementación de fecha).

Un resultado verdadero indica que la fecha es válida y un resultado falso sugiere que no lo es.

Nuevamente, esto también deshabilitará las fechas en un calendario que no son válidas.

Sin embargo, una diferencia crítica entre usar matDatepickerFilter y usar min o max es que filtrar todas las fechas antes o después de cierto punto no evitará que un usuario avance un calendario más allá de ese punto.

Consulte el siguiente ejemplo de código. Vea primero el marcado HTML.

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

 Ahora, vea el archivo TypeScript relacionado con el marcado anterior.

import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

En este ejemplo, el usuario puede retroceder hasta 2005, pero todas las fechas anteriores no podrán seleccionarse. No podrán retroceder más en el calendario que 2000.

Si escriben manualmente una fecha antes del mínimo, después del máximo o filtrada, la entrada tendrá errores de validación.

Cada propiedad de validación tiene un error diferente que se puede verificar:

  1. Por ejemplo, el valor que viola una propiedad mínima tendrá el error matDatepickerMin.
  2. El valor que viola una propiedad máxima tendrá el error matDatepickerMax.
  3. El valor que viola una propiedad matDatepickerFilter tendrá el error matDatepickerFilter.

Entrada angular y eventos de cambio

Los eventos nativos (entrada) y (cambio) de la entrada solo activarán la interacción del usuario con el elemento de entrada; no se activarán cuando el usuario seleccione la fecha de la ventana emergente del calendario.

Por lo tanto, una entrada de selector de fecha también admite eventos (dateInput) y (dateChange), que se activan cuando un usuario interactúa con una entrada o la ventana emergente.

El evento (dateInput) se activará siempre que el valor cambie debido a que el usuario escribe o selecciona una fecha del calendario. Del mismo modo, el evento (dateChange) se activará cada vez que el usuario termine de escribir la entrada (en <input> blur) o cuando un usuario elija la fecha de un calendario.

Consulte el siguiente marcado HTML.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<div class="example-events">
  <div *ngFor="let e of events">{{e}}</div>
</div>

 Ahora, vea el archivo mecanografiado relacionado con ese marcado.

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Datepicker input and change events */
@Component({
  selector: 'datepicker-events-example',
  templateUrl: 'datepicker-events-example.html',
  styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
  events: string[] = [];

  addEvent(type: string, event: MatDatepickerInputEvent) {
    this.events.push(`${type}: ${event.value}`);
  }
}

Deshabilitar partes de Angular Datepicker

Al igual que con cualquier <entrada> estándar, es posible deshabilitar la entrada del selector de fecha agregando la propiedad deshabilitada.

De forma predeterminada, <mat-datepicker> y <mat-datepicker-toggle> heredarán su estado deshabilitado de <input>, pero esto se puede anular configurando una propiedad deshabilitada en el selector de fecha o los elementos de alternancia.

Esto es muy útil si desea deshabilitar la entrada de texto pero permitir la selección a través del calendario o viceversa.

Consulte el siguiente marcado HTML.

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
    <mat-datepicker #dp2></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</p>

 Ahora, vea el archivo mecanografiado.

import {Component} from '@angular/core';

/** @title Disabled datepicker */
@Component({
  selector: 'datepicker-disabled-example',
  templateUrl: 'datepicker-disabled-example.html',
  styleUrls: ['datepicker-disabled-example.css'],
})
export class DatepickerDisabledExample {}

Eso es todo por este tutorial. 

Fuente: https://appdividend.com/2022/02/16/angular-datepicker/

#angular