Set default date for bootstrap datepicker - javascript

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

How to show next 7 days while using datetimepicker?

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>

Calendar not starting from today jqueryui daterangepicker

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">

unable to set calendar start date in pikaday calendar

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(),
},
}
},

Jquery datepicker in master page

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:

Birthday Date Auto generate year for 18 years old

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

Categories