WebAppers

/ best free open source web resources /

Shopify

jsDatePick – A Simple Free Javascript Date Picker

Posted · Category: Calendar, GPL License

jsDatePick is a javascript date picker that uses DOM techniques to generate its HTML code. Read the parameters and working examples below, and within minutes, you can have a popup date picking solution on your website.

The user launches the calendar by entering the input field, and then chooses a date, automatically returning the selected date to the field. jsDatePick has a range of parameters for extending or limiting default functionality.

jquery-date-picker

Requirements: -
Demo: http://javascriptcalendar.org/javascript-date-picker.php
License: GPL License

14 Comments
  • Arold

    37k seems pretty bloated for something so small?

  • K

    It isn’t very pretty is it?

  • Shaun

    Good find. It would be nice if it had a list of compatible browsers (aka IE6).

    Arold, datepickers take a lot of code in order to make them flexible. Even jQuery UI’s datepicker comes in at 45KB, and thats not even with the required core js or stylesheet. Personally, I think the developer of this calendar did a good job.

    “K”, looks better than almost any other datepicker out there that you can download. It looks simple, yet clean and efficient to me.

  • http://javascriptcalendar.org Paul Walsh

    Hi Guys,

    I run the site, and my partner Itamar wrote the calendar. Thanks for posting about it and thanks for the comments so far.

    Re size: It is quite optimized and relatively small compared to similar calendars.

    Re look: We like the look and purposely went in this direction precisely because we thought many existing date pickers were a bit ugly by default.

    Re compatibility: I’ll work on it and get it on the site ASAP. We’ll be releasing an update some with jQuery support and some cool features.

    Thanks.

  • http://www.baboon.ir/ baboon-ir

    Thanks for posting about it and thanks for the comments so far

  • Julien

    Excellent calendar component !
    Just have a question : how to select date from the current day to the futur only ?

  • Julien

    Done !
    To limit date from futur just add this code on jsDatePick.full.1.3.js

    (line 220) add
    this.oConfiguration.limitToFutur = (aConf["limitToFutur"] != null) ? aConf["limitToFutur"] : false;

    (line 676) add
    if (this.oConfiguration.limitToFutur){
    if ( this.isAvailable(this.currentYear, this.currentMonth, parseInt(oDay.getDate()+1)) ){
    disabledDayFlag = true;
    aDayDiv.setAttribute(“isJsDatePickDisabled”,1);
    }
    }

  • disqus_Lugvd7LSxG

    how can i autoclose calender when it popups, i want to close it automatically after few seconds once the user would click in textbox, calander when it popup specially,

  • Matt

    Looks very nice but there is one flaw. It creates the calendar inside the parent element of the input field. If that parent has overflow:hidden the calendar gets truncated. Ideally it should appear on top of everything, regardless of existing tags. Otherwise very good work!

  • Noufal

    How to disable the left arrow buttons?

  • maicoo

    Julien! i tried to copy the code below in jsDatePick.full.1.3.js it doesnt work with me.

  • maicoo

    i tried it but didnt work. need help here. tnx

  • Onak Pagulong

    i have a question: How would disable the past dates?
    thank you!

  • http://www.kodstrap.com Emre Öztürk

    and you set
    window.onload = function () {

    g_globalObject = new JsDatePick({

    useMode: 1,

    isStripped: true,

    target: “div3_example”,

    limitToFutur:true <——————THIS LINE

    });

    Thank You Julian it's working

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons