Multiple date picker javascript

I want to create an input form to allow a user to add the monthly recurring item in my application. The user can pick multiple dates from the month.
After I googling I found AlloyUi datepicker using multiple type.

My questions are :

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month".

Any other library that fit in my case?

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

What does How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". mean?? ` fit in my case`, which case?

– Saeed.Ataee
Nov 15 '18 at 6:46

After the user picket the dates, I want to show "Every 2nd, 10th, 28th every month" on given input value form or placeholder. @Saeed.Ataee

– Muhammad Dyas Yaskur
Nov 15 '18 at 6:52

add a comment |

My questions are :

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month".

Any other library that fit in my case?

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

What does How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". mean?? ` fit in my case`, which case?

– Saeed.Ataee
Nov 15 '18 at 6:46

After the user picket the dates, I want to show "Every 2nd, 10th, 28th every month" on given input value form or placeholder. @Saeed.Ataee

– Muhammad Dyas Yaskur
Nov 15 '18 at 6:52

add a comment |

My questions are :

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month".

Any other library that fit in my case?

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

My questions are :

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month".

Any other library that fit in my case?

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

YUI().use(
 'aui-datepicker',
 function(Y) 
 new Y.DatePicker(
 trigger: 'textarea',
 mask: '%m/%d/%y',
 calendar: 
 selectionMode: 'multiple'
 ,
 popover: 
 zIndex: 1
 ,
 panes: 1
 );
 );

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

javascript html alloy-ui

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

edited Nov 15 '18 at 6:43

Saeed.Ataee

3,69811733

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

asked Nov 15 '18 at 6:14

Muhammad Dyas Yaskur

4031520

What does How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". mean?? ` fit in my case`, which case?

– Saeed.Ataee
Nov 15 '18 at 6:46

After the user picket the dates, I want to show "Every 2nd, 10th, 28th every month" on given input value form or placeholder. @Saeed.Ataee

– Muhammad Dyas Yaskur
Nov 15 '18 at 6:52

add a comment |

What does How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". mean?? ` fit in my case`, which case?

– Saeed.Ataee
Nov 15 '18 at 6:46

After the user picket the dates, I want to show "Every 2nd, 10th, 28th every month" on given input value form or placeholder. @Saeed.Ataee

– Muhammad Dyas Yaskur
Nov 15 '18 at 6:52

What does How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". mean?? ` fit in my case`, which case?

– Saeed.Ataee
Nov 15 '18 at 6:46

After the user picket the dates, I want to show "Every 2nd, 10th, 28th every month" on given input value form or placeholder. @Saeed.Ataee

– Muhammad Dyas Yaskur
Nov 15 '18 at 6:52

add a comment |

1 Answer
1

active

oldest

votes

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker(
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
);

it serves your requirements:

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

2

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313457%2fmultiple-date-picker-javascript%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker(
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
);

it serves your requirements:

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

2

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

add a comment |

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker(
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
);

it serves your requirements:

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

2

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

add a comment |

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker(
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
);

it serves your requirements:

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker(
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
);

it serves your requirements:

How to multiple select without press control? Currently, if click without control on another day will remove all other days.

How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

edited Nov 15 '18 at 7:53

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

answered Nov 15 '18 at 6:49

Md. Tazbir Ur Rahman Bhuiyan

1,3501424

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

2

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

add a comment |

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

2

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– Roy Scheffers
Nov 15 '18 at 7:48

@RoyScheffers updated it.

– Md. Tazbir Ur Rahman Bhuiyan
Nov 15 '18 at 7:53

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj