I am trying to open the bootstrap datepicker on the date stored in the var startDate.
The code below is not working as the default date format for the datepicker is mm/dd/yy. startDate is in the format dd/mm/yy.
<script type="text/javascript" >
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date('{{ startDate }}')
});
$("#datepicker").datepicker( "option", "dateFormat", "dd-mm-yy" );
}
</script>
For example, if the startDate is 05/03/2018 (5th March), the datepicker will open with default date 03/05/2018 (3rd May).
Use formate: instead of dateFormat:
<script type="text/javascript" >
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
format: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date(toMMDDYYYY(startDate))
});
}
function toMMDDYYYY(date) {
var datePart = date.split("/");
var MMDDYYYY = [datePart[1], datePart[0],datePart[2]].join('/');
return MMDDYYYY
}
</script>
You have written the wrong syntax for format. Just replace dateFormat with format in your script code like below
More help on Bootstrap Date-picker Format
<script type="text/javascript">
function toggle_dp() {
$("#myModal").modal("show");
$("#datepicker").datepicker({
format: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
defaultDate: new Date('{{ startDate }}')
});
$("#datepicker").datepicker("option", "format", "dd-mm-yy");
}
</script>
Related
function getNext7WorkingDays(){
var d = new Date();
var day = d.getDay();
if(day>=0 && day<=3) return 9;
else if(day!=6) return 10;
else return 11;
}
$('.datepicker_quiz_dataa').datetimepicker({
timepicker:false,
format:'d-m-Y',
formatDate:'Y/m/d',
minDate: 1,
maxDate: '+'+getNext7WorkingDays()+'D'
});
In this code I using datetimepicker where I am getting only date in d-m-y format and I want that it show current date to next 7 days dates only but now I am getting previous 14 days dates. So, How can I do this? Please help me.
Thank You
Try this below :
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "7d",
dateFormat: "d-m-y"
});
OR
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "1w",
dateFormat: "d-m-y"
});
Hope it helps
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker").datepicker({
minDate: 0,
maxDate: 6,
dateFormat: "d-m-y",
onSelect : function(r) { console.log(r) }
});
</script>
</body>
</html>
I am using the jQuery UI Daterangepicker (reference).
I want the calendar to start from today, with no max date. I am trying to use moment in the calendar for the dates.
This is the HTML & JS code I have but it sets the end date on today with no minDate.
<input id="search-vac-daterange" name="search-vac-daterange">
$("#search-vac-daterange").daterangepicker({
minDate: moment(),
startDate: moment()
});
I have also tried with minDate: new Date() and startDate: new Date(). No results either. The dates stay with today as end date.
NOTE: moment is working because a console.log(moment()); returns me a moment object:
p {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: j, _d: Fri Jan 18 2019 16:14:35 GMT+0100 (Midden-Europese standaardtijd), …}
EDIT: I have tried the suggestions as given below, none of them have an impact on the solution.
dateFormat: 'dd/mm/yy',
minDate: moment().format('DD/MM/YYYY'),
startDate: moment().format('DD/MM/YYYY'),
or
minDate: new Date(moment("11-02-1993").format("YYYY-MM-DD")),
startDate: new Date(moment("11-02-1994").format("YYYY-MM-DD")),
Added image to show the problem:
You have two issues. Firstly moment() returns a Moment object which is not a valid value for the minDate or startDate properties of the picker. To fix this just pass a standard Date object.
Secondly you need to provide options to the underlying jQueryUI datepicker control within the datepickerOptions object:
$("#search-vac-daterange").daterangepicker({
datepickerOptions: {
minDate: new Date(),
startDate: new Date(),
maxDate: '+1y' // required for future dates to be selectable
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/2.3.1/moment.min.js"></script>
<input id="search-vac-daterange" name="search-vac-daterange">
When i trigger the start date input box, I want to show the future or past month in calendar popup as a starting date in end date calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/site.css">
</head>
<body>
<input type="text" id="datepicker">
<br/>
<input type="text" id="datepicker2">
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"> </script>
<script src="https://dbushell.com/Pikaday/pikaday.js"> </script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function (date) {
picker2.setMinDate(date);
//picker2.???? to set the starting month of picker2 calendar
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function () {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
</script>
</body>
</html>
please check the above example, based on start day selection i want to trigger the end date calendar starting month. please suggest.
JS bin link
As I understand your question, you want to set the selected month in picker to the picker2 object. use the API onOpen.
Example
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function(date) {
//console.log(this.getMoment().format('Do MMMM YYYY'));
console.log('test ' + date);
picker2.setMinDate(date);
//picker2.setStartRange(date)
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onOpen: function() {
picker2.gotoDate(picker.getDate())
},
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
When I worked with Pikaday package in Vue.Js project I had to set default date to my date field in form. I tried many different versions of setting default date. But they didn't work for me. Finally I found the solution for my situation. The solution was to set prop like auto-default="autoDefault" here autoDefault is equels to true to Pikaday component like this...
<vue-pikaday v-model='date' auto-default="autoDefault" :options="pikadayOptions" />
data() {
return {
autoDefault : true,
pikadayOptions: {
format : 'YYYY/MM/DD',
minDate : moment().toDate(),
},
}
},
I know there is so many similar question already been asked but none of them solved my problem. I tried so many times but the datepicker still not work.
So in my master page
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<head/>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In my content Page(head section inside asp content place holder 1)
// i tried this 4 way but still not work
// $("[id$=txtStart]")
// $("input[id$='date2']").datepicker();
<%--<%=txtStart.ClientID%>--%>
<%-- $("#<%=txtStart.ClientID %>")--%>
$(document).ready(function () {
$('[id$=txtStart]').datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$('[id$=txtEnd]').datepicker('option', 'minDate', min); // Set other min, default to today
}
});
//another datepicker same as above
$('[id$=txtEnd]').datepicker({
.....
}
});
});
this is my control
<td class="auto-style3"><asp:TextBox ID="txtStart" runat="server" > </asp:TextBox>
<td class="auto-style3"><asp:TextBox ID="txtEnd" runat="server" > </asp:TextBox>
Your code should be
$(document).ready(function () {
$("#<%=txtStart.ClientID%>").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$("#<%=txtEnd.ClientID%>").datepicker('option', 'minDate', min); // Set other min, default to today
}
});
});
I've tested and works fine with this code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
$(document).ready(function() {
$("[id$=txtStart]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEnd]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
from <asp:TextBox ID="txtStart" runat="server"/> to <asp:TextBox ID="txtEnd" runat="server"/>
</div>
</asp:Content>
Thought I would suggest another datepicker range.
then your code would be:
<script>
$(document).ready(function () {
var dtStart = $('[id$=txtStart]'),
dtEnd = $('[id$=txtEnd]');
$('[id$=txtStart]').dateRangePicker(
{
separator: ' to ',
getValue: function() {
if (dtStart.val() && dtEnd.val())
return dtStart.val() + ' to ' + dtEnd.val();
else
return '';
},
setValue: function(s, s1, s2) {
dtStart.val(s1);
dtEnd.val(s2);
}
});
});
</script>
and your master page:
<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/daterangepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
result:
My question is how to automatically set the date range for 18 years old, like for example today is 2015, so the date range must be 1935-1997, don't mind the 1935. Because the date range is for 18 years old and above, so when it come to 2016 the date range will automatically set to 1935-1998 then so on so forth as the year comes by.
Here's the current code with javascript on it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997',
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997' ,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="birthday">Birthday</label>
<input type="text" id="from2" name="from">
</body>
</html>
Well as you can see you in my javascript function the range function is hardcoded. :(
Get the range:
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
Set the range to the DatePicker:
yearRange: interval
Fiddle