I'm using bootstrap-datepicker and I have attached a listner to changeMonth event.
If I use one of setters listed here (e.g. setStartDate, setDatesDisabled, setDaysOfWeekHighlighted etc.) inside my listner, the picker view does not updates (month is unchanged). Everything works fine, if I do not use any datepicker's setter inside my listner.
Here a live sample showing the issue. In this example I'm trying to update dinamically hightlighted dates when the user changes months.
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
What am I missing?
I came across this issue when I aswered this question where I used setDatesDisabled inside changeMonth listner.
EDIT (after comments)
I've tried both using $(this) inside 'changeMonth' and assign my datepicker to a variable as shown here:
var dt = $('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
})
dt.on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// Neither using dt nor $(this) works
dt.datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
but the problem is still there.
#VincenzoC Please make sure you're using the latest version (1.7.1), this Fiddle demonstrates that it works https://jsfiddle.net/s35za9dr/
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
EDIT
Using any of the set* methods (e.g. setDatesDisabled) in the changeMonth, changeYear, changeDecade or changeCentury events will trigger an update which will cause the picker to revert back to the month in which the current view date occurs.
To prevent this you simply need to initiate the picker with the updateViewDate option set to false.
Problem: Your method update to current date whenever you change the date.
Solution: Try following code.
Remove your current on change method.
Add document Ready for initialize to current date and other is default.
<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
<script>
$( document ).ready(function() {
var startDate = $('#datepicker').datepicker('setStartDate', new Date());
});
$('#datepicker').datepicker().on('change', function(e){
// I use setStartDate just as example
var startDate = $('#datepicker').datepicker('setDaysOfWeekHighlighted', ['2016-04-29', '2016-04-30']);
// Do something else
//...
});
$('#datepicker2').datepicker().on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
</script>
</head>
<body>
</body>
</html>
Related
With this code, I able to get selected date as unix.
jsfiddle
function getValue() {
var date = $('#example').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
How about PersianDate, I want to get selected date as unix.
jsfiddle
You can do it by using getState method on persianDatepicker instance, like this:
var pd = $('#example').persianDatepicker({
autoClose: true,
// other options
});
function showUnix() {
const state = pd.getState();
alert(state.selected.unixDate);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-date/dist/persian-date.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-datepicker/dist/js/persian-datepicker.js"></script>
<link href="https://unpkg.com/persian-datepicker#latest/dist/css/persian-datepicker.min.css" rel="stylesheet" />
<input type="text" id="example" class="initial-value-type-example inline-example leapyear-algorithmic">
<button onclick="showUnix()">show unix</button>
I tried to make a multi date selector calendar with jqueryUI and came to know about a plugin named "Multi-Dates-Picker". The problem with that is that I could not dynamically set the value in the usual way of a setter method in jqueryUI widgets, while the getter method works fine.
var date = new Date();
var today = new Date();
var tomorrow = (new Date()).setDate(today.getDate() + 1);
function myFunction() {
$('#mdp-demo').multiDatesPicker({
minDate: 3, // today
maxDate: 15, // +30 days from today
maxPicks: 2,
});
}
function maxpicksup() {
// Setter
$("#mdp-demo").datepicker("option", "maxDate", 21);
$("#mdp-demo").datepicker("option", "minDate", 0);
//setter
$("#mdp-demo").datepicker("option", "maxPicks", 5);
// Getter
var firstDay = $("#mdp-demo").datepicker("option", "maxPicks");
alert(firstDay);
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.js"></script>
<body onload="myFunction()">
<div class="" id="mdp-demo"></div>
<button onclick="maxpicksup()">click</button>
</body>
I am trying to dynamically disable date (jquery datepicker) which is already in database. I have done static method in that I am able to achieve goal but not getting success in dynamic approach
<script language="javascript">
$(document).ready(function () {
var getfromdb = #Html.Raw(#ViewBag.bookdate);
var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\'';
var disableddates = [result];
var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [disableddates.indexOf(string) == -1];
}
});
And here is my controller code:
List<string> getbookdate = new List<string>();
getbookdate = BookDate(id);
ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList());
public List<string> BookDate(int? id)
{
DateTime dt = System.DateTime.Now.Date;
var getbookdate = (from x in entity.BookingMasters
join
y in entity.BookingDetails on x.BookingId equals y.BookingId
where x.ProductId == id && y.FromDate > dt && y.ToDate > dt
select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList();
List<string> allDates = new List<string>();
foreach (var r in getbookdate)
{
for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1))
{
allDates.Add(Convert.ToString(date.ToShortDateString()));
}
}
return allDates;
}
Disable doesn't work well with date picker. Try my plnkr.
https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/
It gets the datepicker on click and parses through the dates and data set given and if a match is found it removes the click event on it. and repeats on each render please see my plnkr link for html. Hope it helps
<!--Disable doesn't work well with date picker. Try this. Hope it helps-->
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ -->
<!--Code-->
<!--HTML PART-->
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether#*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script data-require="jqueryui#*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body class="container">
<h1>Hello User</h1>
<div class="box">
<div class="box-content">
<div class="row">
<div class="col-md-4">
<label>Date:</label>
<input type="text" id="date-picker-control" />
</div>
</div>
</div>
</div>
<script>
var element = $('#date-picker-control');
element.datepicker();
element.off('click').on('click', function() {
// Setup DatePicker
console.log('Update Date Picker');
// If user changes month or year, update date picker
// based on the date list you have
$("#ui-datepicker-div")
.find("div.ui-datepicker-header")
.find('a.ui-datepicker-next, a.ui-datepicker-prev')
.on('click', function() {
element.click();
});
// Get all available dates in current displayed dates
var availableDates = $("#ui-datepicker-div")
.find("table.ui-datepicker-calendar")
.find('td[data-handler="selectDay"]');
availableDates.filter(function(i) {
var targetDateElement = $(this);
//Get date parts
var year = +targetDateElement.data("year");
var month = targetDateElement.data("month") + 1; //JS fix
var day = +targetDateElement.find('a.ui-state-default').text();
var builtDate = month + '/' + day + '/' + year;
// you can substitute your json data
var targetDates = [
"10/2/2017", "10/6/2017", "10/8/2017"
];
$.each(targetDates, function(i, targetDate) {
// If builtDate match targetdate then turn click event oFF on that date
if (targetDate == builtDate) {
targetDateElement.css({
'border': '1px solid gray',
'background': 'darkgray',
'font-weight': 'bold',
'color': 'gray'
}).off('click');
}
});
});
});
</script>
</body>
</html>
Your original idea is in the right direction, but I think there's probably something weird going on with all the string conversion. I'd just pass through dates and compare with dates rather than all the stringy stuff:
I've written this quick test...
controller:
//Replace with however you get dates
ViewBag.DatesList = new List<DateTime>()
{
new DateTime(2018, 01, 01),
new DateTime(2018, 01, 02),
new DateTime(2018, 01, 03)
};
return View();
View:
<script language="javascript">
$(document).ready(function () {
var disableddates = [];
#foreach (DateTime date in ViewBag.DatesList)
{
//note JS month is zero-based for no good reason at all...
#:disableddates.push(new Date(#date.Year, #date.Month-1, #date.Day))
}
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
//filter array to find any elements which have the date in.
var filtereddates = disableddates.filter(function (d) {
return d.getTime() === date.getTime();
});
//return array with TRUE as the first (only) element if there are NO
//matching dates - so a matching date in the array will tell calling
//code to disable that day.
return [filtereddates.length == 0];
}
});
</script>
This appears to work for me.
My HTML code like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/
If I click submit button, I successfully get the datetime value 300 minutes from now
But if before submitting, I wait 10 minutes, the result does not match my expectations
For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it
How can I do that?
How do I make the automatic datetime value increase?
Update :
Whether the time value in textfield can be automatically increased based on current time?
Not sure why would you need it, but you can use something like:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
On click, it will change the datetimepicker to the current date + 300 minutes.
I've updated the example: https://jsfiddle.net/8jpmkcr5/86/
EDIT:
Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
You can test here: https://jsfiddle.net/8jpmkcr5/98/
You can update it every click and/or every minute
function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
$("#btnSubmit").click(function() {
updateTime();
value = document.getElementById('datetimepicker').value;
console.log(value)
});
setInterval(function(){
updateTime();
},60000);
check
https://jsfiddle.net/8jpmkcr5/88/
Anyway the idea of the picker is to let user choose, what's the point using it and forcing some date?
You can try a different approach and add the 300 minutes on submit like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
var d1 = new Date (),
d2 = new Date ( value );
d2.setMinutes ( d1.getMinutes() + 300 );
console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
var date = convertUTCDateToLocalDate(new Date(startdate));
date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
date = date.toLocaleString();
$('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
var offset = date.getTimezoneOffset() / 60;
var hours = date.getHours();
newDate.setHours(hours - offset);
return newDate;
}
I have a code snippet which gives me the date on selecting from Calender of JSdatepicker Library.
I am looking for a way to get the name of weekday with selected date ex: monday, tuesday etc...
Below is the usage of jsDatepicker:
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField1",
dateFormat:"%Y-%m-%d",
cellColorScheme:"beige"
});
};
</script>
I checked out the documentation given in jsDatePicker But didn't got anything.
Can somebody help?
I also tried using jQuery Datepicker, but it doesn't work at all, below is the jQuery datepicker code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
For both cases my inout field to select and display date is:
<input type="text" id="datepicker"/>
If you want to use JsDatePick, here's one way to do so:
// Save returning object to variable
var dateSelector = new JsDatePick({
useMode:2,
target:"inputField1",
dateFormat:"%Y-%m-%d",
cellColorScheme:"beige"
});
// Use setOnSelectedDelegate to capture clicks
dateSelector.setOnSelectedDelegate(function(){
// Get selected day from plug-in
var day = dateSelector.getSelectedDay();
// Create a JS native Date
var date = new Date(day.year, day.month, day.day);
// Get the day of the week (0 is Sunday)
var dayOfTheWeek = date.getDay();
// For demonstration purposes, place a string into input field
var inputField = document.getElementById("inputField1");
var dayOfTheWeekStr = '';
switch (dayOfTheWeek) {
case 0:
dayOfTheWeekStr = 'Sunday';
break;
case 1:
dayOfTheWeekStr = 'Monday';
break;
case 2:
dayOfTheWeekStr = 'Tuesday';
break;
default:
dayOfTheWeekStr = 'Wed.-Sat.';
break;
}
inputField.value = dayOfTheWeekStr;
});
Here's a JSFiddle.
For jquery datepicker here's fiddle
$(function() {
var dt = $("#datepicker" ).datepicker({
onSelect: function (dt) {
var wa = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var nd = new Date(Date.parse(dt));
$(this).val(wa[nd.getDay()]+', '+dt);
}
});
});