JavaScript calendar date picker for ASP NET

JavaScript calendar date picker for ASP NET

kudvenkat

9 лет назад

66,444 Просмотров

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/03/javascript-calendar-date-picker-for.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

In this video we will discuss how to include a JavaScript calendar date picker on ASP.NET page.

There are several free JavaScript calendar date pickers available on the internet. Just search the internet for free JavaScript calendar date picker for ASP.NET.

Pikaday is one of the JavaScript calendar date picker. Below is the URL to download.
https://github.com/dbushell/Pikaday

Here are the steps to include Pikaday JavaScript calendar date picker on ASP.NET webform
1. Extract the contents of the downloaded folder.

2. Copy and paste the following folder and js file in your asp.net project. Copy them to the root directory of your web application.
css
pikaday.js

3. On the webform, include references to the following 3 css stylesheets. Also include reference to pikaday.js JavaScript file.
pikaday.css
site.css
theme.css

4. Drag and drop a TextBox control on the webform

5. Include the following script element on the webform
[script type="text/javascript"]
var picker = new Pikaday(
{
field: document.getElementById('TextBox1'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000, 2020],
numberOfMonths: 3,
theme: 'dark-theme'
});
[/script]

At this point, your webform should look as shown below.

[%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %]
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]
[head runat="server"]
[title][/title]
[link href="css/pikaday.css" rel="stylesheet" type="text/css" /]
[link href="css/theme.css" rel="stylesheet" type="text/css" /]
[link href="css/site.css" rel="stylesheet" type="text/css" /]
[script src="pikaday.js" type="text/javascript"][/script]
[/head]
[body]
[form id="form1" runat="server"]
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[script type="text/javascript"]
var picker = new Pikaday(
{
field: document.getElementById('TextBox1'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000, 2020],
numberOfMonths: 3,
theme: 'dark-theme'
});
[/script]
[/form]
[/body]
[/html]

Тэги:

#javascript_calendar_date_picker #javascript_calendar_date_picker_for_website #javascript_calendar_for_asp.net #javascript_calendar_for_asp.net_textbox #javascript_calendar_for_website #free_javascript_calendar_for_website #asp.net_javascript_calendar_date_picker #javascript_calendar_date_picker_code_asp.net #javascript_in_asp.net_c# #javascript_in_asp.net_tutorial
Ссылки и html тэги не поддерживаются


Комментарии:

Dinesh
Dinesh - 02.09.2023 17:25

It's good sir!

Ответить
Roman Mertsalov
Roman Mertsalov - 12.08.2020 14:20

Thanks, that's good video! Unfortunately calendar doesn't work inside of gridview (in the footer or edit row for instance). Do you know how to make it work inside of gridview columns?

Ответить
Coading Jet Computer Classes
Coading Jet Computer Classes - 23.03.2020 22:57

Hii
How we can show bydefault current date using this code

Ответить
Ali Shaker
Ali Shaker - 04.02.2020 12:07

Thank you so much

Ответить
Bradley R
Bradley R - 30.01.2020 22:17

Hi, I have a textbox15 control in the Footer and added this code but it will not trigger the calendar. I can toss a new textbox1 and it instantly comes up. Just never in the footer, is it hidden or protected somehow?

Ответить
Jaguar Brave
Jaguar Brave - 15.07.2019 11:52

why it's not working with Site Master, can you help ?

Ответить
sarthkee waghchaure
sarthkee waghchaure - 21.06.2019 13:18

how can i set automatically system date in textbox?

Ответить
jayesh baviskar
jayesh baviskar - 24.03.2019 14:42

One of the Best Video.

Ответить
pramodh Thota
pramodh Thota - 25.01.2019 20:47

i'm using the jquery date picker and implemented the date range calendar controls in my aspx home page. I have a question. when i tried to enter the date format(MM/dd/yyyy) as 01/02/2019.It's works fine as usual. But insted when i entered the date format as (1/2/2019 ) It throws me an exception. I want that to take it as (01/02/2019). Can someone please help me on this.
Thanks

Ответить
Alejandro Martinez Contreras
Alejandro Martinez Contreras - 15.08.2018 08:32

late.. but there is a fix for the date format



<script type="text/javascript">
var picker = new Pikaday({
field: document.getElementById('txtFechaInicio'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2050-12-31'),
format: 'D/M/YYYY',
yearRange: [2000, 2050],
numberOfMonths: 1,
toString(date, format) {
// you should do formatting based on the passed format,
// but we will just return 'D/M/YYYY' for simplicity
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${day}/${month}/${year}`;
},
parse(dateString, format) {
// dateString is the result of `toString` method
const parts = dateString.split('/');
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1] - 1, 10);
const year = parseInt(parts[1], 10);
return new Date(year, month, day);
}

});
</script>

just add the toString part and the format function (just copy and paste!!)

Ответить
Muhammad Usama
Muhammad Usama - 01.04.2018 00:43

THanks Alot dear.... it worked perfectly but i got a problem .....it is not working in my content page .....can you please guide some solution

Ответить
عبدالله ال طالع
عبدالله ال طالع - 01.12.2017 10:57

Excellent
how can we do hijri calendar datepicker?
Thank you

Ответить
boyina vikash
boyina vikash - 01.09.2017 22:03

Sir, present link is in out of service....
Can you please say the alternate way......

Ответить
Pablo Valenzuela Catalan
Pablo Valenzuela Catalan - 05.07.2017 08:01

it works, but works with out css aplied, i dont know why, any suggestion ?

Ответить
MINI THAMPI
MINI THAMPI - 08.03.2017 12:50

i am not able to download that jquery file

Ответить
Syed Taqi Kazmi
Syed Taqi Kazmi - 09.12.2016 12:12

Great work!

Ответить
Steven Moya Quiñones
Steven Moya Quiñones - 01.11.2016 01:05

It doesn't work using Master Page. Where should I add the references of the styles and the javascript?

Ответить
Gabriel Takyie
Gabriel Takyie - 13.09.2016 17:58

thank you very much
it works perfect
keep up the great work

Ответить
Abhinav Kumar
Abhinav Kumar - 20.08.2016 23:47

Great

Ответить
Ryan Rosete
Ryan Rosete - 11.08.2016 05:26

how can i change date format

Ответить
abd alazeem babiker ahmed
abd alazeem babiker ahmed - 23.05.2016 16:12

Great , It works well

Ответить
Avinash Patil
Avinash Patil - 06.05.2016 22:27

how to add javascript in content page using master please explain

Ответить
Lord Helmet
Lord Helmet - 13.04.2016 18:13

compiles, but clicking on the TextBox does nothing. Great instructions too. Note, I am using ASP but not the HTML headers you have in your ASPX file.
EDIT: Add the HTML stuff in Site.Master and NOT the ASPX portion.
EDIT2: Nope, still doesn't work.

Ответить
Toscky Talking
Toscky Talking - 18.02.2016 13:58

doesnt work with textbox

Ответить
saleh ali
saleh ali - 02.02.2016 00:36

how to change date format
please help me

Ответить
Marcin Piwowarski
Marcin Piwowarski - 25.10.2015 11:47

How can I change date format in textBox? I tried few thing but all failed. No I'm stuck

Ответить
felix olonde
felix olonde - 30.09.2015 11:36

How do we use it on meteor platform...Help please

Ответить
Bilal
Bilal - 17.05.2015 10:21

Thank you but it's not working with site master! I don't know why.

Ответить
David Espada
David Espada - 12.03.2015 15:15

nice, what about reading the selected text data..

Ответить
TAN YEW MENG
TAN YEW MENG - 12.03.2015 06:09

Superb video on JavaScript calender. Awesome as always

Ответить