fengyuanchen / datepicker Goto Github PK

View Code? Open in Web Editor NEW

1.2K 1.2K 542.0 1.46 MB

⚠️ [Deprecated] No longer maintained. A simple jQuery datepicker plugin.

Home Page: https://fengyuanchen.github.io/datepicker/

License: MIT License

CSS 3.12% JavaScript 91.50% HTML 2.09% SCSS 3.28%

datepicker javascript jquery-datepicker-plugin jquery-plugin

datepicker's People

Contributors

Stargazers

Watchers

Forkers

xiwc jasongwt ideamax wyue wuhongjun bocahptualang tinple ios-user01 yst726 codeurge ravenswang 925800521 tonyspb frontshuai d-ruiter luizreginaldo goktugozturk simon-db tnpro invmatt fahimfarookme adam1985 marcoarib johnnychn chinazdg mgarmash wangdanqing vasistbhargav afrontenddev jfrader teng2015 adityacse jannela gabrielps nazarpelekh herisant xiebaochun chalamministries mmdia flycumt frysukarto sangkyunyoon gregzhang8 sbwebportfolio sannvixie liuchengyong iwrichard jcloudyu uriahwu hectorchow javierslzrh junaid986 krishna25vrinsoft wesavetheworld semdy lxqswing jerry-goodboy wwwjsw jackieli123723 jellyer ankitmalikg2 setiadi1 antoniogarcia78 ahmadalfy 297854895 eshikerya justeser ontpnet weichiachang amajeedmuazu karatheodory jsyluo rmuhire sachinanshu lpreterite claudiojs wangyangsea zqjimlove zoliszabo hanyangunivleejoohyun ztxxxx0000 zeddz92 aka-wintermute nishant-sharma bikpaul chtheis egamihideki giovannirodighiero pttsky luyang1026 evanwang1990 alisher-x flintlozk duchaiweb hgonz007 ankitaseraphic henrik evgeniy-tropin blfraga lisanmiao

datepicker's Issues

Check if just exists

Hello,
I need to include this plugin dynamically into a webpage. I would check if another instance of plugin is just used in this external webpage and if it's not just exists proceed to include script.

Is there a line of code to check if plugin is just available on the page?

Thanks for your support.

Cannot override the options of the languages when I initialize with $.fn.datepicker method

I cannot change date format by $.fn.datepicker method If I use the zh-CN language option.

Wish for a time picker

Very nice plugin. Is there any chance that you implement a time picker?

Unable to use with jquery-ui (WP environment)

I have already tried enqueuing datepicker.min.js before and after jquery-ui but it did not work. I need jquery-ui as well so I can't dequeue that.

iPhone 6 Bug - Alignment & Modal

When using the datepicker on a "pop-up" div - once a date is selected it bugs the popup div and makes the background content the focus. Doesn't do the same thing on any other device that I've tried.

iPhone 6 also has some issues with alignment, where the calendar doesn't popup directly underneath the input box, but more skewed and sometimes off screen.

autoHide doesn't work when exiting the field using "tab" key

When the user hits tab, and the focus move to another field the calendar remains visible even if auto hide is set to true.

autoHide has no effect when selecting muted item

Hi,

When using the datepicker with the following options: autoHide: true, autoPick: true. Days from the previous or next month has the CSS class muted defined. These can be selected (input is updated with selected date), but the autoHide option has no effect on these. Is this by design or possible an bug?

click function only hides the view, if the clicked item view equals day.

if (view === 'day') {
this.hideView();
}

muted items has either day prev or day next defined.

Possible solution:
Either the view check could be removed or day prev (here) and day next (here) items could have disabled: true defined (not ux friendly).

Date picker don't automatically close and focus on input when date is selected

How to apply trigger when multiple instances of datepicker occur on the page?

Hello,

How to apply trigger when multiple instances of datepicker occur on the page? Eg:

HTML

<input class="my_class" id="my_date_01" name="my_name_01" data-toggle="datepicker"><i class="fa fa-calendar datepicker_trigger" aria-hidden="true"></i>

<input class="my_class" id="my_date_02" name="my_name_02" data-toggle="datepicker"><i class="fa fa-calendar datepicker_trigger" aria-hidden="true"></i>

$('[data-toggle="datepicker"]').datepicker({
  autoHide: true,
  trigger: ".datepicker_trigger",
  format: 'dd/mm/yyyy',
  daysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
});

Currently, the above opens several datepicker interfaces.

Thank You.

Edit:
I looked through the code to try and find where the show was applied in the hope that I could show just the closest instance of datepicker when clicking on a trigger (or even the index() of datepicker that matched the trigger's index()) but I couldn't figure out how to do it.

wrong floating position in Android (Chrome or native)

When I pick an input box, most times datepicker appear far away, almost outside the window in android native browser and android chrome browser.
Desktop works flawless.

btw: Excelent datepicker, congrats !

Question: How to pick date from input value which is already inserted

Hello and first of all thanks for a nice plugin!

I've created my own language file and changed the css a little and everything works fine.

What i want to achieve now, is to get a data from my table and get the calendar to use this value as picked date.

<?php echo "
<div class='col-xs-2'>
            <input class='form-control input-sm' type='text' name='datetime' value='$timecreated'  data-toggle='datepicker'/>
</div> " ?>

I have placed my files in the header and my script at the end of the page.

<head>
        <link  href="/admin/plugins/datepicker/datepicker.css" rel="stylesheet">
        <script src="/admin/plugins/datepicker/datepicker.js"></script>
        <script src="/admin/plugins/datepicker/datepicker.da-DK.js"></script>
</head>

<script>
    $('[data-toggle="datepicker"]').datepicker({
    language: 'da-DK'
  });
</script>

what i get by this code is a fine textfield with my imported data, but the calendar has selected "today" and when i pick any date, the textfield visible date is changed, but not the value of the input field.

See picture 1 and 2.
Picture 1 is before i used the calendar.
Pucture 2 is when i changed the date with the calendar.

Can you please help me with this?

0.3.1bug一枚

如果在filter属性的function中禁止了10月1日，5月1日，1月1日等节假日，那么在月视图中10月，5月，1月是无法被选择的（只要某月的1号被禁止掉了，月视图的那一月就无法点击）

好吧，月视图并不是直接切换月份然后进入日期选择视图，而是将当前日期的月份替换为选择的月份直接触发了pick，如果那一天是被禁用的，那么月视图中也就被禁用的，建议月视图和年视图点击的时候并不是直接出发pick，而是进入那一月（年）的一个日期选择界面，

Datepicker floating above at a height when we select month or year view

When the datepicker comes at the bottom of input field its not an issue, but when the datepicker floats on the top of the input field and then we choose the month or the year view the datepicker does not adjust its position to match the position of the input field.

in the above image its ok
but when we choose the year of month view

as you can see the entire datepicker is floating aloft

Always get current date when using getDate

when I use getDate method, it always get current date rather than the datepicker's date
for example:

$('.start-date').datepicker({format: 'yyyy-mm-dd',language: 'zh-CN',endDate:Date() });
$('.end-date').datepicker({format: 'yyyy-mm-dd',language: 'zh-CN',startDate: $('.start-date').datepicker('getDate'),endDate:Date() });

for the second datepicker, only today is available.

【BUG】config default language through: $.fn.datepicker.setDefaults failed

算了，直接上pr

Datepicker does not hide onblur of input field

I have updated the plugin to fix this and pull requested my changes on #43

How to make linked datepicker?

How to make a linked date picker ex. FROM DATE to TO DATE.

Format as optional argument to methods

Hi,

would be nice, if methods like getDate and formatDate would have another optional parameter format. So even if I have set my format, I can get date in different format by those methods.

Example:

$(".myDateField").getDate(true); // return 25.05.2017 as my format is dd.mm.YYYY
$(".myDateField").getDate("YYYY-mm-dd"); // print 2017-05-25

The same would be also nice with functions like setDate, setStartDate, setEndDate, parseDate. Even if date is coming by AJAX for example, I know in which format, but if I'm using another, I have to parse it myself...

autoHide doesn't work when picking another month's day

When choosing a date that is not from the month shown, the datepicker doesn't hides.

Date picker not working on modal

[Docs bug + enhancement request] Date ranges

In the docs you have for setting a date range:

var now = Date.now();

$("#datepicker-disable-past").datepicker({
isDisabled: function(date) {
return date.valueOf() < now ? true : false;
}
});

date.valueOf() is at midnight and we're comparing that to right now today, so this can lead to disabling the current day when it shouldn't. My solution was something like:

return date.valueOf() <= Date.now() - 1000 * 60 * 60 * 24;

Edit: it would be even better if there were minDate and maxDate options for the API

Show method doesn`t work

$('.icon-calendar').on('click', function() {
                    $('.js-datepicker').datepicker('show');
                })

This code doesn't show my datepicker. When i use another methods like destroy or pick it`s work fine.

my init:

$('.js-datepicker').datepicker({
                    format: 'dd-mm-yyyy',
                    // endDate: new Date(),
                    language: 'pl-PL',
                    autoHide: true,
                })

support month disabled

can you support month disabled
like:
$.fn.datepicker.setDefaults({
autoClose:true,
dateFormat:'yyyy-mm',
isDisabled: function(date) {
return date.valueOf() < new Date() ? true : false; //before now enable
}
});
$("#selectStartDate").datepicker();

onSelect option

I had a scenario where I had to show the datepicker onclick of a button instead of an input element.
The Issue was that the date was getting reflected in the button. I solved the problem by making the font size 0.

But I had to update the input box upon date change in the button. This was difficult since the button elements did not fire change events when the text changed.

It would be great if there is an option for callback when the date is selected.

Ex :
$(".datepicker").datepicker({
onSelect : function(date){
// Do something with the date.
// Like updating the textbox (In my case)
}
});

[建议]option配置信息的属性命名请统一

autohide这些不是驼峰命名，
然后startDate又是驼峰。
很容易导致配置的时候出现错误。我一开始就配置成autoHide，然后看了半天

Dynamic options?

Hi,

I need to update startDate and endDate dynamically on two datepickers that form a daterange picker. Currently I destroy and re-initialize the datepicker instances when the date range changes. Is there a better solution? jQueryUI's datepicker can be updated like this but I'd like to stick to yours.

Thanks in advance.

Cheers
Björn

Update method issue?

Thank you for a wonderful jQuery plugin. I think it will be very useful.

I'm having an issue with the 'update' method and wondered it this is expected behavior.

The markup includes an input element. The user can either type in the date or use your datepicker. If the user types the date, the datepicker reflects correctly the new date when opened. All is good.

However, if the user first sets a new date via the datepicker and then the input element's value is programmatically reset via JavaScript followed by a call to datepicker's update method to sync the datepicker with the element's date, the datepicker's calendar does not reflect the element's programmatically set date. The issue is, if the user sets the date in datepicker with a mouse click update does not seem to work if the element's value is programmatically changed.

Note, setDate works fine to resync the datepicker with the element.

format 为什么不支持星期

在languages中也有星期的配置，建议format能支持星期。
同时希望format能直接支持输出HTML，这样可以应对特殊的显示要求，目前html是直接当text输出的。
或者让format支持function参数，将选取的date作为参数，让用户自己返回需要的格式

Higlight today?

How can I highlight today?

Focus input with tab and start/enddate not working

If you have the datepicker with a start/enddate and you jump into it via the tab key, the view still displays the current month. if you do this by using the mouse, it work as expected.

Reproducing:

Go to: http://fengyuanchen.github.io/datepicker/
Fill startDate with: 01/01/1999
Fill endDate with: 01/01/1999
click into the input field
-> Result as expected: 1. Jan 1999 displayed
defocus field by click on eg. the demo headline.
jump via tab key into the input field
-> Result: Sep. 2016

Transformation on the date being shown

I do not see it in the docs or demo but @fengyuanchen do you think its possible to use the default format but when showing the date in the input we can do a transformation?

ReferenceError: require is not defined

I REALLY want to use your excellent plugin as it's such an elegant solution, but I'm following your 'download the latest release' method: including the files in the head of my project, including jquery and initiating using $('[data-toggle="datepicker"]').datepicker(); on document load in and all I get is:

ReferenceError: require is not defined

I don't have the know-how/access to install it via one of the three 'quick start' methods and was wondering if I was missing something? As far as I can tell I'm doing everything your installation instructions are requiring.

Many thanks!

today is disabled for {startDate: new Date()}

When I use the code below, today should be active. but it is disabled:

<input type="text" data-toggle="datepicker" name="date" placeholder="Pick a date">
<script>
  $('[data-toggle="datepicker"]').datepicker({
    autohide: true, 
    startDate: new Date()
  });
</script>

if I use the code below today becomes active:

<input type="text" data-toggle="datepicker" name="date" placeholder="Pick a date">
<script>
  $('[data-toggle="datepicker"]').datepicker({
    autohide: true, 
    startDate: new Date().toDateString()
  });
</script>

How do I remove a date?

First I want to thank you for creating this great library.

I want to allow our users to delete the selected date. I've tried to use the reset method but that won't work, when I call "getDate" method it returns the selected date although I can see the input is empty

pick event has delay-trigger problem pick事件触发时间不对

每次选中日期后，选择框隐藏后pick不触发，第二次选择后才会触发上一次的事件。麻烦验证下是否这个问题，或是我用法有问题

第一次加载的时候会晃动一下

点击输入框后，会向右轻微晃动一下，点第二下的时候又不会了用的bootstrap3

Past dates and dates out of range are not fully disabled

I noticed that althought I use the javascript function to disable past dates, only the dates of the present month are actually disabled and not clickable. The dates of the past month, months or years may by clicked althought they appear grayed.
This happens also when the user wants to disable certain days or set a range of valid dates: dates are actually disabled only for the present month, but not for the past or future month/months or year/years. You can easily check the issue in the demos 'Disable the past days', 'Disable all of the Wednesday' and 'Set a date range'.

Default Date Set

How can we set the default date value? For instance, when the user loads the page it should show today's date, in whichever format selected, by default.

datepicker is not accessible

nice datepicker but its not accessible using keyboard.

are you planning adding this ability?

How to get language code correctly?

Hi!
I am trying get a code as 'es-ES' to pass like it parameter.
I tried with "window.navigator.language". Firefox and Edge return "es-ES". But Chrome returns only "es".
Any solution?
Thanks in advance.

Multiple values for isDisabled?

I'm trying to disable weekends, while having a minDate set but nothing I seem to do works. Is this not possible, or am I doing something wrong?

Disabling month/year views?

Don't see anything in the documentation regarding disabling the month and year views that the picker switches to if you interact with the appropriate heading. I just need to display the month, with no fancy switching.

After date is set programattically, when we click it again - it doesn't change

Options checked: inline, container

Change date programatically to 31 july 2017: $('.docs-date').datepicker('setDate', new Date('2017-07-31'))
Select other date by clicking
Click on 31 July 2017 - it doesn't change !!!

Demo: https://youtu.be/dB4V-1qvyrQ

[NFR] Support Month names in datepicker format

Hi,

Thanks for the nice datepicker!

It would be nice to be able to format dates as:

Feb 10, 2016
and
15 February 2016

Cheers!

container option only works if inline is true

I was having trouble getting the container option to work. A quick look through the code gives me the impression that container is only used when the inline option is set to true. Is this the case and is there any reason for this dependency?

Selecting a date from a month before/after month in view disables it when scrolling to that month

Confusing title, I know....

Here's an example: The datepicker loads with the current month, June, displayed. With the view still on June, I select May 31st. I then scroll over to May, select a different date (let's just say May 2nd), then try to select May 31st again. It won't select that date anymore. It does this for previous and next months.

Ipad issue

Hi there,

I've noticed that on desktop when I click outside the datepicker, it closes it.
But on ipad, for example, I'm not able to close the datepicker by clicking on the outside of it.

Does anyone experienced this problem?

Thanks :)

Jquery is planning to depreciate $.isNumeric

Jquery is planning to depreciate $.isNumeric. I noticed multiple functions using this. Is it possible to update the datepicker to remove $.isNumeric?

https://github.com/jquery/jquery/milestones/3.1.0

Autoclose on disabled dates

The docs state:

Options:
name: autoClose
type: boolean
default: false
Description: Auto close the picker when a date was selected.

If you set autoClose to true and select a disabled date, the widget is closed. IMO it shouldn't close, since a date wasn't "selected".

Using trigger disables input activation?

Perhaps my thinking is wrong on this, but correct me if I am wrong. The trigger works as expected, but the input no longer triggers the calendar. Was this intentional or am I doing something incorrectly? If this is intentional, is there a way to have both the input and trigger have the calendar popup

<div class="field">
  <label>Birth Date</label>
  <div class="has-icon">
    <input type="text" data-toggle="datepicker">
    <i class="icon-calendar-o"></i>
  </div>
</div>

$('[data-toggle="datepicker"]').each(function() {
  var $this = $(this);

  $this.datepicker({
    format: 'mm/dd/yyyy',
    autoHide: true,
    trigger: $this.siblings("i"),
  });
});