js

jqueryui date selector with examples and code

Posted in js
38481
6:20 am, August 31, 2018
 

jqueryui date selector with examples and code

This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui.

Without using a theme this one looks pretty good.

This version of it does not come with a time picker, but i will add a demo for that next.

datepicker 1 example image

datepicker 1 example

simple usage

<script>$( function() {
    $( "#datepicker" ).datepicker();
  } );</script>
<input id='datepicker'>

example 1 - basic usage

here is a really basic example using the above code

example 2 - select the date format

this example shows how you can format the date once its selected.

includes

JQuery 3.2.1

<script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script>

JQueryUI 1.12.1 min

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

JQueryUI 1.12.1 css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

HTML

<h3>datepicker 1</h3>
<p>basic datepicker with default options</p>
<input id='datepicker'>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Javascript

/* datepicker 1 */
$( function() {
    $( "#datepicker" ).datepicker();
  } );

datepicker 1

basic datepicker with default options

Posted in js
38481
6:20 am, August 31, 2018

View Statistics
This Week
199
This Month
4664
This Year
2707

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
jqueryui date selector with examples and code with custom date formatting fancybox youtube showing video links in a lightbox - updated with fixed code parts fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector with examples and code jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Related Search Terms
js options 7
js object 17
js themes 7
js Image 7
js image 10
js mage 9
js apps 30
js Apps 27
js referrer 16
js Options 9
js object-fit 16
js https 42
js JQuery 51
js kruxorcom 36
js with 59
js Sheet 82
js above 73
js KruXoRcom 61
js function 67
js Using 74
js CSS 94
js without 80
js really 89
js looks 85
js good 101
js date 81
js Basic 109
js Iframe 81
js Height 83
js theme 91
js KruXoR.com 1
js style 93
js here 115
js reason 104
js pre 87
js time 99
js that 84
js item 102
js input 105
js real 117
js form 108
js code 72
js shows 113
js simple 124
js height 92
js Really 116
js select 124
js Theme 111
js iframe 94
js this 16
js sheet 157
js using 84
js epic 95
js from 107
js kruxor 99
js even 111
js most 105
js basic 116
js sim 129
js Function 79
js href 96
js jquery 181
js html 124
js css 137
js ajax 442
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
A.A. Milne’s Winnie-the-Pooh: “If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.”
A.A. Milne
Random CSS Property

:host-context()

The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
:host-context() css reference