Refresh datepicker onced saved to database via ajax
$( function() {
var dateFormat = "mm/dd/yy",
from = $("#from").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $("#to").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on("change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
});
I am working with jquery datepicker. Firstly I am picking a start and an end date. Then I am sending the dates using ajax to save it to the database.
I am clearing the input date field like this:
document.getElementById('from').value = '';
document.getElementById('to').value = '';
After that, once I want to add another date it will make the datepicker (dates based on the selected start date and end date) disabled .
I just want to refresh the datepicker to enable me to freely choose and add another date.
javascript jquery datepicker
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
add a comment |
$( function() {
var dateFormat = "mm/dd/yy",
from = $("#from").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $("#to").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on("change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
});
I am working with jquery datepicker. Firstly I am picking a start and an end date. Then I am sending the dates using ajax to save it to the database.
I am clearing the input date field like this:
document.getElementById('from').value = '';
document.getElementById('to').value = '';
After that, once I want to add another date it will make the datepicker (dates based on the selected start date and end date) disabled .
I just want to refresh the datepicker to enable me to freely choose and add another date.
javascript jquery datepicker
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41
add a comment |
$( function() {
var dateFormat = "mm/dd/yy",
from = $("#from").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $("#to").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on("change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
});
I am working with jquery datepicker. Firstly I am picking a start and an end date. Then I am sending the dates using ajax to save it to the database.
I am clearing the input date field like this:
document.getElementById('from').value = '';
document.getElementById('to').value = '';
After that, once I want to add another date it will make the datepicker (dates based on the selected start date and end date) disabled .
I just want to refresh the datepicker to enable me to freely choose and add another date.
javascript jquery datepicker
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
$( function() {
var dateFormat = "mm/dd/yy",
from = $("#from").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $("#to").datepicker({
defaultDate: "+1w",
minDate: 0,
}).on("change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
});
I am working with jquery datepicker. Firstly I am picking a start and an end date. Then I am sending the dates using ajax to save it to the database.
I am clearing the input date field like this:
document.getElementById('from').value = '';
document.getElementById('to').value = '';
After that, once I want to add another date it will make the datepicker (dates based on the selected start date and end date) disabled .
I just want to refresh the datepicker to enable me to freely choose and add another date.
javascript jquery datepicker
javascript jquery datepicker
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
edited Nov 21 '18 at 7:24
ProgrammerPer
679713
679713
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
asked Nov 21 '18 at 6:27
Miks AliboMiks Alibo
217
217
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41
add a comment |
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41
add a comment |
2 Answers
2
active
oldest
votes
Reinitialize your date picker in Ajax success like below.
success: function() {
$( "#from" ).datepicker();
$( "#to" ).datepicker();
} ,
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
add a comment |
To clear textbox you can use $("#textboxid").val('');. And according to your requirement you need to put below code in ajax success block to reinitialize the datepicker.
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
In the below code snippet you can see the clearing of datepicker textboxes and re initializing the datepicker.
$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406359%2frefresh-datepicker-onced-saved-to-database-via-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Reinitialize your date picker in Ajax success like below.
success: function() {
$( "#from" ).datepicker();
$( "#to" ).datepicker();
} ,
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
add a comment |
Reinitialize your date picker in Ajax success like below.
success: function() {
$( "#from" ).datepicker();
$( "#to" ).datepicker();
} ,
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
add a comment |
Reinitialize your date picker in Ajax success like below.
success: function() {
$( "#from" ).datepicker();
$( "#to" ).datepicker();
} ,
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
Reinitialize your date picker in Ajax success like below.
success: function() {
$( "#from" ).datepicker();
$( "#to" ).datepicker();
} ,
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
answered Nov 21 '18 at 6:37
ShreeShree
12.8k2071123
12.8k2071123
add a comment |
add a comment |
To clear textbox you can use $("#textboxid").val('');. And according to your requirement you need to put below code in ajax success block to reinitialize the datepicker.
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
In the below code snippet you can see the clearing of datepicker textboxes and re initializing the datepicker.
$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
add a comment |
To clear textbox you can use $("#textboxid").val('');. And according to your requirement you need to put below code in ajax success block to reinitialize the datepicker.
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
In the below code snippet you can see the clearing of datepicker textboxes and re initializing the datepicker.
$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
add a comment |
To clear textbox you can use $("#textboxid").val('');. And according to your requirement you need to put below code in ajax success block to reinitialize the datepicker.
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
In the below code snippet you can see the clearing of datepicker textboxes and re initializing the datepicker.
$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
To clear textbox you can use $("#textboxid").val('');. And according to your requirement you need to put below code in ajax success block to reinitialize the datepicker.
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
In the below code snippet you can see the clearing of datepicker textboxes and re initializing the datepicker.
$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>$(function() {
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
});
function clearDates() {
$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
edited Nov 21 '18 at 7:18
Julian Stark
1,3031526
1,3031526
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
answered Nov 21 '18 at 6:54
Aquib IqbalAquib Iqbal
21417
21417
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406359%2frefresh-datepicker-onced-saved-to-database-via-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I already resolve my own issue. Thank you for the 2 of you.
– Miks Alibo
Nov 21 '18 at 7:47
If below answer don't address your problem post your own answer and accept that as a working answer. That's how SO work.
– Shree
Nov 23 '18 at 11:39
$( "#from" ).datepicker( "option", "maxDate", null ); $( "#to" ).datepicker( "option", "minDate", 0); This resolve my problem. I don't know the main reason on how the logic of this code.. But it resolve my problem in refreshing the select a date range.
– Miks Alibo
Nov 26 '18 at 2:41